本次我們來(lái)聊聊，vuejs里如何使用less。都是根據(jù)自己的開(kāi)發(fā)經(jīng)驗(yàn)來(lái)寫(xiě)，不對(duì)的地方請(qǐng)各位拍磚。

在webstorm上配置Less

首先，全局安裝less

npm install less -g

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

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

在"Program"里填寫(xiě)less的安裝路徑；

在"Argument"　里的不用修改；

在"Output paths to refresh"里填寫(xiě)解析的.css文件路徑，（$FileNameWithoutExtension$.css 這是解析在與less同一路徑目錄下）；

Vue項(xiàng)目配置Less

首先，安裝less依賴："less" 與 "less-loader";　　

npm install less less-loader --save（這里最好是寫(xiě)成--save）

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

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

 簡(jiǎn)說(shuō)安裝依賴是"--save"和"--save dev"的區(qū)別

我們?cè)谑褂胣pm install 安裝模塊或插件的時(shí)候，有兩種命令把他們寫(xiě)入到 package.json 文件里面去，比如：

--save-dev

--save

在 package.json 文件里面提現(xiàn)出來(lái)的區(qū)別就是，使用 --save-dev 安裝的 插件，被寫(xiě)入到 devDependencies 對(duì)象里面去，而使用 --save 安裝的插件，則被寫(xiě)入到 dependencies 對(duì)象里面去。

那 package.json 文件里面的 devDependencies  和 dependencies 對(duì)象有什么區(qū)別呢？

devDependencies  里面的插件只用于開(kāi)發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，而 dependencies  是需要發(fā)布到生產(chǎn)環(huán)境的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。