项目创建

通过命令创建项目vue init 项目名称 webpack

安装依赖

执行npm install less less-loader --save-dev

修改配置文件

找到build文件夹下的webpack.base.conf.js文件，在module下的rules数组里添加下面这条配置

     {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },

最终webpack.base.conf.js文件修改部分如下：

注意：
部分安装依赖并且配置之后，在使用less时，会出现less-loader错误，一般是less-loader版本过高问题，自行降低版本即可。

1、安装less、less-loader、和style-resources-loader（如果不使用全局变量，这个可以不要）

npm install less less-loader style-resources-loader--save

npm高版本安装不对less版本可能会报错，这里给出我安装成功的版本，直接拷进package.json然后npm i即可

"less": "^4.1.2",
"less-loader": "^7.0.0",
"style-resources-loader": "^1.5.0",

2、vue.config.js配置全局引入less入口文件

/* less配置 */
function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, "./src/styles/index.less")]
    })
}
module.exports = {
  chainWebpack: config => {
	  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
	  types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
}

在vue脚手架中，当我们使用less时，在style标签添加lang属性，指定less，此时我们会发现出现报错！

<style lang='less'></style>

 那么如何在vue脚手架中使用less呢？具体操作如下：

答：下载less以及它的加载器，并在webpack中进行配置，

• 下载less以及它的加载器

npm i less less-loader@4.1.0（指定less加载器版本号）

• 在webpack中进行配置

bulid文件夹->webpack.base.conf.js->relus属性中，添加一段代码

{
   test: /\.less$/,
   loader: 'style-loader!css-loader!less-loader'
 }

以上操作完成之后，重启，就可以在style标签中使用less啦~

注意： 一定要重启！一定要重启！一定要重启！