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

Posted 2023-02-22

【中文标题】如何在 vue.config.js 中为 node_modules 添加 sass 加载器

【英文标题】：How to add sass loader for node_modules in vue.config.js

【发布时间】：2020-08-04 04:48:58

【问题描述】：

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

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

我的 vue.config.js 是这样的：

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

【参考方案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';