Question

我已经下载了an angular starter，我正试图在其上安装Bootstrap。他们在External Stylesheet section中解释了如何做到这一点。

我已经安装了bootstrap：

npm i bootstrap --save
npm i bootstrap-sass --save

然后添加到styles.scss：

的顶部

@import 'bootstrap/scss/bootstrap.scss';

但它标有红色提及：

无法解析目录＆＃39; bootstrap＆＃39;

任何帮助都将深表感谢！

Answer 1

如前所述，您需要在css中导入时添加波形符。

@import 'bootstrap/scss/bootstrap.scss';

其次，bootstrap css文件正在加载字体以及样式表，导致您遇到错误，因为它使用亲戚路径webpack不知道在哪里拾取。

要解决此问题，您可以将文件夹的路径更改为正确的路径，如下所示from here：

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

将字体加载器添加到webpack配置中：

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  loader: 'url-loader',
}

但是解决问题的最简单方法是删除正在执行的样式导入，删除bootstrap-sass依赖项并改用cdn。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

这样做的好处是已经使用此cdn下载了引导程序的客户端将获得缓存版本。由于很多网站都使用它，很可能他们不必再次下载它，它也可以省去托管或合并到你的捆绑包中的麻烦。

Answer 2

为了让sass-loader从sass文件夹导入mode_modules模块，请在模块路径前添加~。否则，提供的路径将被解析为相对路径：

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

有关详细信息，请查看sass-loader docs。

Answer 3

src/styles/bootstrap/scss/bootstrap.scss处不存在任何内容，因此您可以在那里手动复制/粘贴（或下载）bootstrap.scss文件，或者只需从src/styles/styles.scss导入node_modules引导程序通过：

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

在您之前添加一行之前，您将收到与字体相关的错误，以便styles.scss读取：

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";