web-dev-qa-db-ja.com

webpack angular2アプリのnode_modulesからCSSをインポートする方法

次のスターターパックから始めるとしましょう： https://github.com/angularclass/angular2-webpack-starter

npm installおよびnpm run startの後、すべて正常に動作します。

たとえば、bootstrap 4のcss（およびcssのみ）など、外部cssモジュールを追加します。 （bootstrapにはブートストラップローダーがあることを知っていますが、一般的な解決策を求めています。npmで利用できる他のcssモジュールである可能性があるため、ここでbootstrap 4について考えてください） 。

Npmでbootstrapをインストールします：npm install [email protected] --save

最初に、import 'bootstrap/dist/css/bootstrap.css';をvendor.browser.tsファイルに追加するだけで十分だと思いました。

しかし、そうではありません。

適切なソリューションを得るにはどうすればよいですか？

私が求めていないソリューション：

  1. 「外部cssモジュールをアセットフォルダーにコピーし、そこから使用します」
    • 私はnpmパッケージと連携するソリューションを探しています。
  2. 「webpackにブートストラップローダーを使用する」
    • 上で説明したように、一般的な解決策を探しています。bootstrapはここの例にすぎません。
  3. 「別のスタックを使用」
    • 上記の正確なスターターパックで解決策を探しています。
cssangulartypescriptnpmwebpack
51
Burnee

いくつかの変更を加えずに、そのスタックを使用してベンダーファイルにcssをインポートすることはできません。

どうして？この行は：

import 'bootstrap/dist/css/bootstrap.css';

実際には、スタイルタグのベンダーCSSが必要な場合に、CSSを文字列としてインポートするだけです。 config/webpack.commons.jsをチェックすると、次のルールが見つかります。

 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader']
 },

このルールにより、コンポーネントはcssファイルをインポートできます。基本的には次のとおりです。

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' // this why you import css as string
  ],

AppComponentにはカプセル化はありません。この行encapsulation: ViewEncapsulation.None,は、CSSルールがアプリにグローバルに適用されることを意味します。したがって、アプリコンポーネントにbootstrapスタイルをインポートできます。

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],

ただし、vendor.tsにインポートする場合は、npm i style-loader --save-devという新しいローダーをインストールする必要があります。これにより、webpackがページにcssを挿入できるようになります。次に、webpack.common.jsで特定のルールを作成し、既存のルールを変更する必要があります。

 { //this rule will only be used for any vendors
   test: /\.css$/,
   loaders: ['style-loader', 'css-loader'],
   include: [/node_modules/]
 },
 {
   test: /\.css$/,
   loaders: ['to-string-loader', 'css-loader'],
   exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
 },

Firsルールは、CSSをインポートしようとしたときにのみ適用されます。node_modules内のパッケージから、2番目のルールは、node_modulesの外部からインポートしたcssに適用されます。

62
Fabio Antunes

Styles.cssファイルで@import '~bootstrap/dist/css/bootstrap.css';を使用すると可能です。 （〜に注意してください）

編集：仕組み-「〜」は、webpack configで設定されたエイリアスで、assetsフォルダーを指します。

編集2：「〜」エイリアスを使用してwebpackを設定する方法の例...これはwebpack設定ファイル（通常はwebpack.config.js）に行く必要があります...

// look for the "resolve" property and add the following...
// you might need to require the asset like '~/bootsrap/...'
resolve: {
  alias: {
    '~': path.resolve('./node_modules')
  }
}
80
Anderson Ivan Witzke

そこで、ここでは、angular-cliを使用してさまざまなCSSファイルをインポートする方法を紹介します。

基本的に、configでCSSファイルを参照することができ（オーバーライドする場合は順序が重要です）、angular-cliが残りを処理します。たとえば、node-modulesからいくつかのスタイルを含めることができます。これは次のように実行できます。

"styles": [
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "styles.css"
  ]

サンプルの完全構成は次のようになります。

。angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-angular-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}
5
Himanshu Arora