vue 中使用sass

VUE2.0中集成Sass

Step1：在项目中安装Sass

1 npm install node-sass --save-dev
2 npm install sass-loader --save-dev

Step2：配置Sass解析器

  在webpack.base.conf.js中，modules结节下的loaders结节中添加es2015的支持，如下所示：  

module: {
    loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ],
}

PS：不安装的话会出现如下错误：Couldn't find preset "es2015" relative to directory

  同样是在webpack.base.conf.js中，modules结节下的rules节点中添加sass的解析器，如下所示：  

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

Step3：尝试使用Sass的SASS语法

<style lang="sass">
  $body-color: red;

  .body 
      color: $body-color;
</style>

Step4：尝试使用Sass的SCSS语法

<style lang="scss">
  $body-color:red;
  .body {
    color: $body-color;
  }
</style>

样式依然生效。

  说明：这个只是最简单的例子，而且是与vue结合，如果你需要单独编译.sass文件或者.scss文件，那么你需要安装Ruby， 同时可以让SASS监控某个样式表的变动，实现样式的热部署。