vuejs：vue-cli webpack模板无法解析sass导入

Posted 2021-05-06

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

我无法找到正确解决@imports中node_module的方法。

@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导入的样式中的相对路径）不会被解析。

有任何想法吗？ TIA

答案

据我所知，你不应该将构建css文件导入你的sass。而只是在你的main.js中导入它：

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

另一答案

尝试安装node-sass和sass-loader

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

如果您正在使用它，请随意用npm替换yarn。

---

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

@import "~bootstrap";