：角度-cliのインクルードパス

Question

でnode_modules

を含めるようにSASS-ローダーを設定：1.0.0-beta.15

ノード：6.5.0

OS：Linuxのx64の

私が欲しいですアプリの中にそれを置くことによってbootstrap-material-design V4-devの枝からSCSSファイルをコンパイルする[0] angular-cli.jsonの[]配列を.stylesが、私は次のエラーを取得：

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./~/bootstrap-material-design/scss/bootstrap-material-design.scss            
Module build failed:                                      
@import "bootstrap/scss/variables"; // from bootstrap node_module                           
^                                           
     File to import not found or unreadable: bootstrap/scss/variables                          
Parent style sheet: /home/ciesielskico/Documents/Git/reports/node_modules/bootstrap-material-design/scss/_variables.scss     
     in /home/ciesielskico/Documents/Git/reports/node_modules/bootstrap-material-design/scss/_variables.scss (line 45, column 1)  
@ ./~/bootstrap-material-design/scss/bootstrap-material-design.scss 4:14-148                        
@ multi styles 

角度-cli.jsonを

"styles": [ 
       "../node_modules/bootstrap/scss/bootstrap-flex.scss", 
       "../node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss", 
] 

bootstrap-material-designのドキュメントでは、node_modulesをsass-loaderのincludePathに配置すると言います。

現在のバージョンのangular-cliでは可能ですか？ はいの場合、どうですか？

Answer 1

回避策

npm post installとして実行されるノードスクリプトを作成しました。ファイルwebpack-build-production.jsとwebpack-build-development.jsがnode_modules/angular-cli/models/にある場合は、sassLoaderエンティティとそれに続くスクリプトが自動的に追加されます。

var fs = require('fs'); 

const FILES = [ 
    "node_modules/angular-cli/models/webpack-build-production.js", 
    "node_modules/angular-cli/models/webpack-build-development.js" 
]; 

const ADDITIONAL_LINES = "\ 
     ,sassLoader: {\n\ 
      includePaths: [path.resolve(\"node_modules/bootstrap-sass/assets/stylesheets\")]\n\ 
     }\n\ 
    };\n"; 


FILES.forEach(function (file) { 
    var text = fs.readFileSync(file, "utf8"); 
    var alreadyEdited = false; 
    var content = ""; 

    text.split(/\r?\n/).forEach(function (line) { 
    if (line.indexOf('sassLoader') !== -1) { 
     alreadyEdited = true; 
    } 

    if (line.indexOf(' };') !== -1) { 
     content += ADDITIONAL_LINES; 
    } else { 
     content += line + "\n"; 
    } 
    }); 

    if (!alreadyEdited) { 
    console.log('File is being adjusted by fix script. ', file); 
    fs.writeFileSync(file, content, 'utf8'); 
    } 
}); 

Answer 2

ないあなたは、この作業を持っているが、これを探している人のために（ブートストラップとSCSSで-CLI NG）か確認します。

SO questionをご覧になり、プリプロセッサのデフォルトスタイルの拡張子をscssに設定してください。

Node-sassまたは他のローダーはインストールする必要はありません。これはデフォルトの拡張機能を少し変更したものです。

次に、インポートとしてブートストラップスタイルをstyles.scssに追加できます。 （単にデフォルトのStyles.cssをの拡張子を変更）

styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss"; 

それはstyleUrls: ['./app.component.css', '../../node_modules/bootstrap/scss/bootstrap.scss']としてapp.component.tsに追加し、グローバルブートストラップ適用するコンポーネントの注釈にencapsulation: ViewEncapsulation.Noneを追加することも可能です。

私はこのファイルがグローバルなスタイルを意図していると思うので、私はstyles.scssアプローチを好んでいます。