如何在 vue.config.js 中为 node_modules 添加 sass 加载器

Question

我正在尝试对节点模块使用 sass 加载程序。但无论我尝试什么，都会出现以下错误：

SassError: Can't find stylesheet to import.

我的 vue.config.js 看起来像这样：

module.exports = {
    css: {
        sourceMap: true,
        loaderOptions: {
            scss: {
                prependData: `
          @import "~@/my-node-module/theme/engine.scss"; 
        `
            }
        }
    },
};

Answer 1

试试这个，来自 docs:

@import "~my-node-module/theme/engine.scss";

~告诉Webpack导入路径不是相对路径

@ 是 src 目录的 Vue CLI 3+ 别名。

所以~@和@本质上是一样的。无论哪种方式，Webpack 都知道路径不是相对路径并检查 src 目录，并且不会找到节点模块。

~ 本身会导致 Webpack 查找其他地方，通常是 node_modules.

项目.scss文件

例如，如果您的 src > assets > scss 目录中有一个 .scss 资产，您可以这样做：

@import '@/assets/scss/variables.scss';

或者这样：

@import '~@/assets/scss/variables.scss';

甚至这样：

@import '~/../src/assets/scss/variables.scss';