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 
? 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: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
+ [email protected]
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'
      }
    ]
  },

最后，可以在代码的

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

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

/* HelloWorld.vue的

---

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