vue-vuecli3.x中sass-loader使用data引入公用sass报错

Eggsy.Li

于 2021-09-08 12:20:14 发布

阅读量651

点赞数

分类专栏： Vue 文章标签： css vue.js

本文链接：https://blog.youkuaiyun.com/qq_19331985/article/details/120177106

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue项目中遇到Sass加载错误的解决方案。首先检查sass-loader是否已安装或版本不匹配，然后通过npm进行卸载和安装指定版本的sass-loader。接着，更新vue.config.js文件中关于sass的配置，将`data`属性改为`prependData`，确保正确导入全局Sass文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 报错现象

在这里插入图片描述

2. 首先检测是否未安装sass-loader插件

在这里插入图片描述
如未安装先安装sass-loader插件/或者版本不合适

npm uninstall --save-dev sass-loader	// 卸载现有的sass-loader
npm install --save-dev sass-loader@8.0.2	// 安装版本可根据自己需求选择安装

3. 修改vue.config.js

原配置

 // css 相关配置
    css: {
        // 是否使用css分离插件
        extract: true,
        // 开启 css source maps
        sourceMap: false,
        // css预设器配置
        loaderOptions: {
            sass: {
                data: '@import "./src/styles/main.scss";'
            }
        }
    },

修改后配置

// css 相关配置
    css: {
        // 是否使用css分离插件
        extract: true,
        // 开启 css source maps
        sourceMap: false,
        // css预设器配置
        loaderOptions: {
            sass: {
                prependData: '@import "./src/styles/main.scss";'
            }
        }
    },