-curl @ webpackで生成したプロジェクトにCSSライブラリを追加するには

Question

新しいプロジェクトを作成してwebpackのバージョンにアップグレードした後、私はブートストラップのCSSを追加したかったのです。

私はdocs [1]でdescibedメソッドを試しましたが、うまくいかないようです。

ユーザーは外部ネットワークにアクセスする必要がないため、cdnバージョンを使用できません。

[1] https://github.com/angular/angular-cli#global-library-installation

"apps": [ 
    { 
     "styles": [ 
      "node_modules/bootstrap/dist/css/bootstrap.css" 
     ], 
... 

。

$ ng --version 
angular-cli: 1.0.0-beta.11-webpack.2 
node: 5.4.1 
os: linux x64 

多分私は何が起こるべきか理解できませんか？ ng build後 はdistディレクトリに何のCSSファイルが存在しないと私はnode_modulesフォルダは、ディレクトリツリー内の1つのステップアップしているので、あなたが、追加する../ node_modulesのフロントを持っていると思いindex.html

Answer 1

あなたが1.0.0-beta.11-webpack.3以上にアップグレードする場合は、インポートのために外部スタイルシートを一覧表示するangular-cli.jsonのapps[0].stylesプロパティを使用することができます。このよう 。これで、index.htmlに何も追加する必要はありません。

実行し、1.0.0-beta.11-webpack.2から1.0.0-beta.11-webpack.3にアップグレードするには：

npm uninstall -g angular-cli 
npm cache clean 
npm install -g angular-cli@1.0.0-beta.11-webpack.3 

注：あなたがng versionを実行している上SyntaxError: Unexpected token ...エラーが出た場合のNode.js 6にアップグレードする必要があるかもしれません。詳細については、https://github.com/angular/angular-cli/issues/1883を参照してください。あなたが新しいプロジェクトを生成し、ブートストラップをインストールする場合

、あなたのangular-cli.jsonは次のようになります。

{ 
    "project": { 
    "version": "1.0.0-beta.11-webpack.3", 
    "name": "demo" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": "assets", 
     "index": "index.html", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "mobile": false, 
     "styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ], 
     "scripts": [], 
     "environments": { 
     "source": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts", 
     "dev": "environments/environment.dev.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "prefixInterfaces": false, 
    "lazyRoutePrefix": "+" 
    } 
} 

Answer 2

に追加は何もありません。 「../node_modules/bootstrap/dist/css/bootstrap.css」

Answer 3

すべてのCSSファイルをangular-cli.jsonのapps[0].stylesプロパティからng build中にはstyles.bundle.jsこれにコンパイルされていますファイルはindex.htmlに含まれています。このファイルをチェックすると、すべてのスタイルが見つかります。したがって、意図どおりに動作します。