webpack - vuejs : vue-cli webpack template cannot resolve sass imports

Question

在使用节点模块导入的 Sass 编译样式时，我在使用 webpack/vue-cli 时遇到问题。

我找不到从 sass 中的 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。

---

另外，您也可以通过以下方式导入bootstrap

@import "~bootstrap";