angular - 将 Bootstrap 3 CSS 导入 Angular 2+，使用 SASS 作为 CSS

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