Vue.js配置less

简述

由于Vue版本的更新，在开发Vue项目过程中，出现了一些问题；其中就有less配置的问题；下面我们来聊聊，vuejs里如何使用less。都是根据自己的开发经验来写，不对的地方请各位拍砖。

环境

webstorm
webpack
Vue.js

在webstorm上配置Less

首先，全局安装less

npm install less -g

然后，在webstorm上配置less插件，"File" --> "settings"-->"Tools"

less1.png

在"file Watchers" -->"+"-->"Less"

less2.png

在"Argument"　里的不用修改；

在"Output paths to refresh"里填写解析的.css文件路径，（<span style="color:red">$FileNameWithoutExtension$.css 这是解析在与less同一路径目录下</span>）；

less3.png

根据以上步骤，在webstorm就可以正常解析less了；

Vue项目配置Less

首先，安装less依赖："less" 与 "less-loader" 以及 "style-loader";

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

接着，配置webapck解析，"bulid"-->"webpack.base.config.js",添加一下代码

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

less4.png

根据以上步骤，在Vue就配置好less了；

原文 http://blog.hawkzz.com/2017/03/13/Vue-js配置less/　　By hawk_zz