vue.js - 如何在 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 Assets ，您可以这样做:

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

或者这个:

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

甚至这样:

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