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

Question

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

SassError：找不到要导入的样式表。

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

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

Answer 1

试试这个，从文档：

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

该~通知的WebPack，进口路径不是相对路径。

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

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

在~由自身原因造成的WebPack到别处，通常node_modules。

项目.scss文件

例如，如果您.scss的src > assets > scss目录中有资产，则可以执行以下操作：

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

或这个：

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

甚至这个：

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