vue-cli4全局安装scss

第一步：

打开package.json中确认你的项目中是否集成了sass相应的"node-sass"和"sass-loader"两个包，如果在创建项目的时候选择了CSS预处理那个选项，则项目中就会有这两个包，没有就按照以下命令安装
npm install node-sass --save-dev
npm install sass-loader --save-dev

第二步

vue.config.js配置文件中配置css

module.exports = {
   css: {
     loaderOptions: {
        sass: {
        	prependData:`@import "./src/assets/scss/style.scss";` 
        	// sass 版本 9 中使用 additionalData 版本 8 中使用 prependData  
            }
        }
    }
}

注意点:1.vue.config.js项目里没有这个文件,可以手动配置。放在根目录下可以被自动加载；2.修改vue.config.js文件后一定要重新启动服务npm run serve

第三步

在需要设置全局样式的地方引入，注意设置style lang=“scss”

<style lang="scss">

#app {
  color: $color;
}
</style>