vue cli3 配置sass全局变量设置不生效 sass混合器文件全局引入

vue cli3 配置sass全局变量的问题

首先确保依赖安装完整

1.node-sass

2.sass-loader

3.style-loader

如果没有安装，运行一下命令安装

npm install node-sass sass-loader style-loader --save

找到vue.config.js加入配置信息

module.exports = {css: {loaderOptions: {sass: {data: `@import "~@/assets/scss/main.scss";`,},}}}

这个地方注意一下，如果你项目中安装的是新版的sass-loader，则需要把配置信息改为

module.exports = {css: {loaderOptions: {sass: {prependData: `@import "~@/assets/scss/main.scss";`,},}}}

*如果存在多个，用分号分开

module.exports = {css: {loaderOptions: {sass: {prependData: `@import"~@/assets/scss/main.scss";@import"~@/assets/scss/mixins/util.scss"`,},}}}