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

Posted 2023-02-22

【中文标题】vuejs：vue-cli webpack 模板无法解析 sass 导入

【英文标题】：vuejs: vue-cli webpack template cannot resolve sass imports

【发布时间】：2018-08-05 15:10:59

【问题描述】：

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

我找不到在 sass 中正确解析 @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

【参考方案1】：

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

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

【讨论】：

这可行，但是构建的 CSS 中的顺序是错误的（vue-cli 使用 webpack-text-extract-plugin）。解释一下： - 来自 .vue 文件的块（在 sass 中） - 来自引导程序导入的块 .vue 文件需要覆盖一些引导程序基本样式。

【参考方案2】：

尝试安装node-sass 和sass-loader

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

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

---

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

@import "~bootstrap";

【讨论】：

这在使用 vue-cli 的 webpack 模板时不起作用。我明确指出语法不起作用，因为 sass-loader 被 postcss-import 绕过了。