vue中使用sass和less

sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等两者各有优势，请根据个人习惯及需要选择。

sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。

sass官网：https://www.sass.hk/
一、在vue中使用sass
1、进入项目根目录，安装依赖

cd myvue
npm install

2、安装依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

3、在build文件夹下的webpack.base.conf.js的rules里面添加配置

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
         {  
          test: /\.scss$/,
          loaders: ["style", "css", "sass"]
        }
      ]
  }

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

4、在 .vue 文件中修改<style> 标签

<style lang="scss"></style>

二、在vue中使用less
1、进入项目根目录，安装依赖

cd myvue
npm install

2、安装依赖包

npm install less less-loader --save

3、修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

{

  test: /\.less$/,

  loader: "style-loader!css-loader!less-loader",

},

4、在 .vue 文件中修改<style> 标签

<style lang="less"></style>