vuejs配置less

　　 本次我們來聊聊，vuejs里如何使用less。都是根據自己的開發經驗來寫，不對的地方請各位拍磚。

在webstorm上配置Less 

　　首先，全局安裝less

　　npm install less -g

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

　　

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

　　

　　在"Program"里填寫less的安裝路徑；

　　在"Argument"　里的不用修改；

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

　　

Vue項目配置Less

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

　　npm install less less-loader --save（這里最好是寫成--save）

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

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

 

簡說安裝依賴是"--save"和"--save dev"的區別

 　　我們在使用npm install 安裝模塊或插件的時候，有兩種命令把他們寫入到 package.json 文件里面去，比如：

　　　　--save-dev

　　　　--save

　　在 package.json 文件里面提現出來的區別就是，使用 --save-dev 安裝的 插件，被寫入到 devDependencies 對象里面去，而使用 --save 安裝的插件，則被寫入到 dependencies 對象里面去。

　　那 package.json 文件里面的 devDependencies  和 dependencies 對象有什么區別呢？

　　devDependencies  里面的插件只用於開發環境，不用於生產環境，而 dependencies  是需要發布到生產環境的。

 

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

原文: http://blog.hawkzz.com/2017/03/30/安裝依賴/　　作者: hawk_zz