vue-cli3 正确的设置sass/scss全局变量

前言

最近学习了一下sass然后今天在使用的时候想着配置一个全局的 @mixin 然后看完了网上的代码试了一遍(好几篇文章都是这样写的)发现会报错，尝试过在 @前面加上~还是没有用 代码如下：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/styles/_variable.scss";
        `
      }
    }
  }
}

后面想着还是老老实实去康康 VUE CLI官方 发现 data这个参数变成了 prependData 引用路径这里也要加上 ~

正确的使用方法

// vue.config.js 中配置
module.exports = {
	// ...
    css:{
        loaderOptions:{
            sass:{
                prependData: `
                @import "~@/assets/styles/mixin.scss";
                `
            }
        }
    }
}

这样就可以使用全局变量的scss/sass 了

总结：当发现别人代码不好使的时候自己看文档，能更快的解决问题