Vuejs:Vue-CLI webpack 模板无法解析 SASS 导入

Question

当从节点模块导入从 Sass 编译样式时，我在 webpack/vue-cli 上遇到了问题。

我找不到一种方法来正确解决node_module@imports。

@import '~bootstrap/dist/css/bootstrap.min.css';  // not working, cannot resolve path (sass-loader syntax)
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';  //works, needs full relative paths

这似乎归结为两个问题：*
sass-loader 不用于解析从 node_module (~module) 导入，尽管它是 vue-cli 为 sass 配置的加载器
* 而是使用 postcss-import，但node_module文件夹没有映射，因此需要相对路径。在这种情况下，不会解析内部依赖项(例如，通过url()加载的字体，具有从node_modules导入的样式内的相对路径)。

有什么想法吗？
蒂亚

Answer 1

尝试安装node-sass并sass-loader

npm install --save-dev node-sass sass-loader

如果您正在使用npm，请随时将其替换为yarn。

---

此外，您可以通过以下方式导入引导程序

@import "~bootstrap";

Answer 2

据我所知，您不应该将构建 css 文件导入您的 sass。 相反，只需将其导入您的主.js如下所示：

import 'bootstrap/dist/css/bootstrap.min.css'