使用SASS将Bootstrap 3 CSS导入Angular 2+中

3

我需要覆盖一些 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

难道没有一种简单的方法来解决这个问题吗?

2个回答

9

我了解到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

1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接