Angular、Bootstrap 4、angular-cli - 依存するscssをどこに置いてインポートするのですか？

Question

this questionを参照してください。これは、ブートストラップの変数に依存しないscssがある場合に機能します。私のindex.htmlで

：

<link rel="stylesheet" href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" 

私はその後、/資産フォルダにstyles.scssを入れた場合は、このようなコンテンツがあります。

@include media-breakpoint-up(sm) { 
    html { 
    font-size: 16px; 
    } 
} 

プロジェクトをビルドするために失敗します。

を

Module build failed: 
@include media-breakpoint-up(sm) { 
     ^
     No mixin named media-breakpoint-up 

私の質問は、ブートストラップの変数とミックスインに依存する独自のCSSをロードする場所です。

Answer 1

あなたはangular-cli.jsonにstyles.scssファイルを設定することができます。

{ 
    "apps": [ 
    { 
     "styles": [ 
     "assets/styles.scss" 
     ], 
    } 
    ] 
} 

これは自動的に出力マークアップのヘッド部に注入されます。

あなたは、プロジェクトの依存関係としてブートストラップを追加する必要があり、ブートストラップ4ミックスインを使用するには：

npm install --save bootstrap@4.0.0-alpha.5 

次に、あなたがあなたのSCSSファイルに直接ミックスイン（node_modulesルートを示すために「〜」を使用して）をインポートすることができます。

ごSCSSであなたは次のようにブートストラップ参照するようにするには：

@import '~bootstrap/scss/mixins';