无法解析目录“引导程序”答案

【问题标题】：Cannot resolve directory 'bootstrap'无法解析目录“引导程序”
【发布时间】：2017-10-23 11:50:05
【问题描述】：

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

我已经安装了引导程序：

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

然后在styles.scss的顶部添加：

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

但它标有红色提及：

无法解析目录'bootstrap'

任何帮助将不胜感激！

【问题讨论】：

您确定相对于您的 scss 页面，这是正确的目录？比如，bootstrap 是在一个名为 bootstrap 的文件夹中，与你的 scss 位于同一目录中？
使用您的 styles.scss 文件中的引导目录的相对路径。由于您使用 npm 安装它，它可能应该类似于 @import '../node_modules/bootstrap/scss/bootstrap.scss'
@R.McManaman 我确定不是。它应该在全球某个地方。我只是按照存储库创建者的指示进行的。
我会听从@Steve 的建议，然后仔细检查 npm 安装文档。查看您帖子中的链接，我认为它可能暗示了一个全局安装引导程序然后在您的特定目录中运行 npm install 的过程。要清楚，你应该npm install -g bootstrap，然后在你的scss目录中运行npm install来创建一个package.json。不过，这都是语义，@Steve 的建议应该可以正常工作。
尝试删除.scss 扩展

标签： javascript node.js twitter-bootstrap webpack sass

【解决方案1】：

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

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

欲了解更多信息，请查看sass-loader docs。

【讨论】：

这不是正确的道路。正确的（至少在我的项目中）是“~bootstrap-sass/assets/stylesheets/bootstrap.scss”。无论如何，当我这样做时，我会收到另一个错误：找不到或无法读取要导入的文件：~bootstrap-sass/assets/stylesheets/bootstrap.scss。父样式表：stdin.
抱歉这个错误是因为我有一个错字。我已经修复了它，现在我遇到了同样的错误，就像我在上面的 cmets 中告诉史蒂夫一样。我收到很多错误，抱怨它在我的 styles.scss 所在的目录中找不到“../fonts/bootstrap/glyphicons-halflings-regular.eot”之类的东西。它似乎不是这个问题的完整解决方案。

【解决方案2】：

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

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

在您添加之前的一行之前，您将收到与字体相关的错误，因此您的styles.scss 显示为：

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

【讨论】：

【解决方案3】：

如前所述，您需要在导入 CSS 时添加波浪号。

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

其次，引导 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 下载引导程序的客户端将获得缓存版本。由于现在很多网站都在使用它，他们很可能不必再次下载它，而且它还省去了您托管它或整合到您的捆绑包中的麻烦。

【讨论】：