ブートストラップ3 CSSをCSSとしてSASSを使用してAngular 2にインポート

Question

ブートストラップ（3.3.7）CSSのいくつかの項目をオーバーライドする必要があるので、他のすべてのスタイルの前にブートストラップをロードする必要があります。私はこれを行う方法を、アプリケーションのメインのstyles.sassの最上部にインポートすることを理解しています。私は経由でこれを行うときには：

@import ./bootstrap.css 

私が手：私はプロジェクトにフォントを持っていなかったので、うまくいきませんでした

ERROR in ./~/css-loader!./src/bootstrap.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./src/bootstrap.css 6:4445-4497 6:4520-4572 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./src/bootstrap.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./src/bootstrap.css 6:4622-4676 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./src/bootstrap.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./src/bootstrap.css 6:4707-4760 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./src/bootstrap.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.ttf' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./src/bootstrap.css 6:4790-4842 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./src/bootstrap.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.svg' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./src/bootstrap.css 6:4876-4928 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

。

これで、ブートストラップをインストールするより適切な方法があるはずです。

だから、私はbootstrap-sassを見つけ、npm install bootstrap-sass --saveを使用して、それをインポートし、その後でstyles.sassにインポート：

@import ../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss 

そして私が手：

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4253-4315 6:4338-4400 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4452-4516 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4549-4612 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.ttf' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4644-4706 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/Users/bradley/Work/dashboard/src' 
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4742-4804 
@ ./src/styles.sass 
@ multi ./src/styles.sass 

はただきれいすべきではありませんこれを行う方法？

Answer 1

私はサスがに導くだけで、このための変数を持っているためにブートストラップを学ぶために来ていますフォントはどこにありますか。彼らがnpm install boostrap-sass --saveでインストールされている場合は、これらの2行のブートストラップ・サスをの先頭にインポートするといいでしょう：

Answer 2

あなたはこのスレッドになっているはずですので、私はあなたがWebPACKのを使用していると仮定しています：

Bootstrap.sass and Webpack