nuxt中定製iview主題顏色

因爲項目須要，設計稿中大量使用的 #FE0101 紅色色值。

iView默認色值爲天空藍，因此爲了不大量修改色值，在nuxt中修改iview主題色頗有必要。

 

iView官網給出的方案是用變量來覆蓋的思路，覆蓋主題顏色。

step1：在nuxt項目中添加index.less文件：

內容以下：

這段代碼首先引入了iview的原有樣式文件，而後用新的變量顏色覆蓋。

下面的操做很天然就是在使用iView組件以前將咱們建立的index.less引入：

step2：引入咱們建立的index.less:

註釋部分是原有的iview.css，使用的是默認的樣式，如今改成引入咱們新建立的index.less。

nuxt中使用iView，僅僅寫了上面iview.js代碼，上面代碼是沒有執行的，須要將其配置到nuxt的pulgins插件中，配置在該插件中的插件，會在實例化vue.js前執行。

step3：將ivew.js添加到plugins配置項中（在nuxt中使用插件時都須要這麼作）：

因爲咱們使用了less，須要安裝less，less-loader

step4：安裝less，less-loader(該步驟不分前後，在以前安裝過了也行)

簡單說下 -save-dev 與 -save 的區別：

-save-dev：將模塊安裝到dev環境下的依賴庫中，在生產模式下是不須要這個模塊的，好比：less，處理後的生產環境變爲css文件。

-save：將模塊安裝到生產環境下的依賴庫中，在生產模式下須要該模塊的，好比：express

 

安裝完畢後嘗試run一下項目：

less ^3.0版本以上會報該錯誤，須要在構建時啓用 javascriptEnabled：

step5：啓用javascriptEnabled：

再次啓動項目便可。