簡(jiǎn)述

由于Vue版本的更新，在開發(fā)Vue項(xiàng)目過(guò)程中，出現(xiàn)了一些問(wèn)題；其中就有l(wèi)ess配置的問(wèn)題；下面我們來(lái)聊聊，vuejs里如何使用less。都是根據(jù)自己的開發(fā)經(jīng)驗(yàn)來(lái)寫，不對(duì)的地方請(qǐng)各位拍磚。

環(huán)境

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

根據(jù)以上步驟，在webstorm就可以正常解析less了；

Vue項(xiàng)目配置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

根據(jù)以上步驟，在Vue就配置好less了；

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