javascript - 无法解析目录 'bootstrap'

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';

但它标有红色提及:

Cannot resolve directory 'bootstrap'

任何帮助将不胜感激!

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 下载 bootstrap 的客户端将获得缓存的版本。由于现在很多网站都使用它，所以他们很可能不需要再次下载它，而且它还省去了您托管它或合并到 bundle 中的麻烦。