使用SASS作为CSS将Bootstrap 3 CSS导入Angular 2

Question

我需要覆盖Bootstrap（3.3.7）CSS中的一些东西，所以我需要在所有其他样式之前加载Bootstrap才能做到这一点。我理解这样做的方法是将它导入到我的应用程序的主文件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。

然后我找到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

我来学习Bootstrap for Sass有一个变量就是为了将它指向字体所在的位置。如果它们与npm install bootstrap-sass --save一起安装，那么你需要在styles.sass的顶部用这两行导入bootstrap-sass：

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"
@import ../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss

Answer 2

我假设你正在使用webpack所以你应该只看一下这个帖子：

Bootstrap.sass and Webpack