Vue cli3 -sass安装及配置流程及报错解决

1、目前我的版本是,这个不报错 可以用 不是最新的差一个版本，因为高版本有问题(node-sass5.0.0/sass-loader11.0.1)我用的是有问题的

 "node-sass": "4.14.1",
 "sass-loader": "10.0.4",

2、安装命令

yarn add sass-loader@10.0.4 -D
yarn add node-sass@4.14.1 -D

3、node-sass 报错了 例如报的vs啥的 ,第二个命令！！！！！！

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

4、然后卸载node-sass在运行第2步的安装命令就可以了
5、关于全局的配置
(1) vue.config.js

module.exports = {
    css: {
         loaderOptions: {
           sass: {
                 //cli4 v8之后用prependData
                additionalData: `@import "@/assets/scss/common.scss";`
           }
         }
    }
 }

(2) common.scss

$mainColor: #f7f7f7;

(3) A.vue普通的vue页面文件

<style lang="scss" scoped>
    //单个变量
    $fontColor: #e4440f;
    .btn {
        width: 80px;
        height: 44px;
        background: $mainColor;
        span {
               color: $fontColor;
        }
    }
</style>