VUE-cl中如何引入less

因为vue-cli 构建的项目默认是不支持 less，所以需要我们手动添加：
步骤如下：
1、安装less 和less-loader

cnpm install less less-loader --save
// 下载固定版本的为以下写法
cnpm i less@3.9.9 --save
cnpm i less-loader@4.0.1 --save

2、 打开build->webpack.base.conf.js文件，添加如下代码：(vue-loader，本身就有配置less加载方式就不用这一步了)
{ test: /.less$/, loader: 'style-loader!css-loader!less-loader' },
位置如下：

module.exports = {
  module: {
    rules: [
      // 此处省略一万个字
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      }
    ]
  },
}

3、完成1,2步骤之后，在页面中就可以用啦！

<style scoped lang="less">
  .wrap{
    background:#f00;
    li{
      list-style: none;
    }
  }
</style>

PS：scoped、lang="less"这两个顺序不能颠倒哦！
PS：scoped、lang="less"这两个顺序不能颠倒哦！
PS：scoped、lang="less"这两个顺序不能颠倒哦！

重要的事情说三遍！ ^ _ ^