vue中安装sass，cli3配置全局sass/scss变量

• 安装了sass需要的安装包！

npm install node-sass --save
npm install sass-loader --save
//sass-loader的版本过高导致的编译错误npm install sass-loader@7.3.1 --save
npm install style-loader --save

或者

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

• cli2 sass全局变量 还得需要一个包

npm install sass-resources-loader --save

• 然后在build>util.js中修改

scss: generateLoaders('sass')

修改成:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        resources: path.resolve(__dirname, '../src/assets/global.scss')     //这里引入创建好的.cscc（里面定义变量）
    }
  }
)

• cli3 在vue.config.js里面进行配置

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

• 最后我在vue文件的style里面就可以这么写就好了

<style scoped lang="scss">
#add {
  width: 100px;
  height: 100px;
  background: $bg;
 }
</style>