vue-cli构建的项目中如何使用Less

vue-cli构建项目

/* 前提已安装webpack和vue-cli，通过vue-cli构建项目 */
PS E:\code\imitate> vue init webpack my_project

? Project name my_project
? Project description A Vue.js project
? Author chenjie <j.chen@hzgosun.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my_project".


# Installing project dependencies ...

构建项目的项目是默认不支持Less的，需要进入项目目录，安装less、less-loader

PS E:\code\imitate> cd my_project
PS E:\code\imitate\my_project> npm install -save-dev less less-loader
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ less-loader@4.1.0
+ less@3.8.1
added 41 packages in 14.621s
PS E:\code\imitate\my_project>

安装成功后，打开build/webpack.base.conf.js，在module.exports=对象的module.rules后面添加一段：

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

最后，可以在代码的<style>标签加上lang="less"属性，就能使用Less了

/* 编辑HelloWorld.vue文件 */
<template>
  <div class="hello">
    <h1 class="hello-vue">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="less" scoped>
  .hello {
    &-vue {
      color: #f00;
    }
  }
</style>

另外，说明一下引用外部Less文件的方法

/* 新建src/assets/styles/index.less，内容如下 */
@color: #ccc;

/* HelloWorld.vue的<style>，注意@import结束需要;号 */
<style lang="less" scoped>
  @import '~@/assets/styles/index.less';
  .hello {
    &-vue {
      color: @color;
    }
  }
</style>

参考：
《学习Less-看这篇就够了》—— 学习Less基础语法可以阅读改文章
《vue-cli 构建的项目中如何使用 Less》