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

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

            • 首先确保依赖安装完整
            • 找到vue.config.js加入配置信息

首先确保依赖安装完整

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"`,
          },
        }
      }
}

你可能感兴趣的:(vue)