vue2配置webstorm下sass编译环境

下载安装ruby

1. https://rubyinstaller.org/downloads/ ，选择自己想要下载的版本；

2. 务必勾选第一项 否则cmd会找不到它；
   

3. 因为国外网络不好，可能安装sass失败，所以需要更新Ruby的源 ，win+R打开cmd,安装sass 如下命令;

gem sources 
gem sources --add https://gems.ruby-china.com/ --remove http://rubygems.org
gem install sass

5. sass -v 查看版本 ；

## webstorm配置SASS/SCSS

1. file-setting；
   
2. 进入 Tool-File Watchers ；
   
3. +添加SCSS/SASS模式 ；
   
   4.在app.vue里面引入样式

@import "style/index";

4. 配置utiles,新建.scss文件(新建scss的情况下) ；
在build-utils下修改scss的配置 不需要这一步！！！！

// 不用这一步 懒得删了 请自行跳过
scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          //你自己的scss全局文件的路径
          resources: path.resolve(__dirname, '../src/style/index.scss')
        }
      }
    ),

在style文件夹下新建.scss文件
在里面编写样式即可
其它.scss文件需要在index.scss中引入

@import "./element-ui"; //举例子

页面样式需要加上 lang=“scss” scoped
5. 配置build下webpack.base.conf.js
在module下的rules里面添加

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },