vue项目安装scss

新建vue 项目 vue init webpack myname

1、cnpm install sass-loader --save，

2，cnpm install node-sass --sava，

3、根目录下找到    build 文件下的 webpack/base/conf.js，找到 rules数组添加如下对象：

rules: [

{

        test: /\.scss$/,

        loaders: ['style', 'css', 'sass']

      },

4，在组件中style标签上添加属性 lang="scss"，保存运行。

5、如果报错：Module build failed: TypeError: this.getResolve is not a function，

    版本太高导致的，找到根目录下的package.json 里面的sass-loader配置，安装的时候是8.0.2，将版本号改为7.3.1，运行还报错就从新安装依赖，npm install，再次运行就可以了。

设置scss变量

1、安装 cnpm install sass-resources-loader --save

2、在src目录下的assets文件夹里面新建一个public.scss文件，用于存放所有的公共变量。

3，根目录下找到   build下的utils.js里面的scss: generateLoaders('sass')

改为：（其实就是在后面加concat的内容）

scss: generateLoaders('sass').concat(

      {

loader:'sass-resources-loader',

        options: {

resources: path.resolve(__dirname,'../src/assets/public.scss')

        }

      }

    )

4、如若已经运行了项目，重新npm run dev ,组件中就可以使用全局变量了。

使用全局变量

1、在全局变量文件里面写入变量（$），混合（@mixin，括号里面为默认值，可有可无），继承（%）等语法。关键词：

2、在组建中使用变量（$+变量名），混合（@include），继承（@extend）。

ps：文章内容是综合网上的文章以及自己实践后的记录，如有侵权，请联系删除。