vue項目組件庫iview主題色定制

博主這邊項目已經完成了，但是為了頁面的美觀，又想重新定制主題顏色。參照網上教程和官網資料踩了很多坑，故此記錄一下“定制過程”。

1.先看官網給的教程：

（1）通過安裝工具修改（不推薦）

這里，博主在第一次嘗試第一種方法失敗后，轉戰方法2，按照官網步驟后，的確能成功修改主題色！but...

博主原來頁面使用的一些組件可效果卻發生變化了，已經icon圖標也變樣了（就例如：原來是一個“+”圖標的地方，變成一個“！”圖標等...）

這樣當然不行！理想的效果是：所以頁面布局、組件效果都不變，但是主題顏色變化。

於是，又回到第一種方法，開啟了我兩天的踩坑之旅。。。

（2）變量覆蓋（推薦）

步驟：

1.在項目路徑下創建文件夾“my-theme”，下面創建一個文件“index.less”

文件中寫：

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

　　注意：import的路徑和官網不用，官網上是vue4.x的配置，用了“view-design”來取代view的地方

不建議直接將自己的其他版本的vue升級為4.x，因為博主升級過程中又掉入了坑中！！！並且沒有爬起來。。。。

2.

在main,js中引入Index.less文件：

import '../my-theme/index.less'

　　然后運行：cnpm run dev

接下來就是瘋狂報錯：找不到該文件

好吧，去網上搜一下，怎么回事~

大概意思是：webpack無法解析less文件，需要安裝一些css相關的解析工具

於是安裝：cnpm install style-loder --save-dev、cnpm install css-loder --save-dev、cnpm install less-loder --save-dev、cnpm install less --save-dev、cnpm install stylus-loder --save-dev

再次運行，又報錯：

這次是因為：less-loader的內部實現中需要設置：javascriptEnabled:true,

而在哪里設置呢？？？找了網上很多教程，嘗試后都后繼出現了新錯誤！！！差點想要放棄，就在這時，博主發現了build文件下utils.js的一段代碼：

exports.cssLoaders = function (options) {

  options = options || {}

  const cssLoader = {

    loader: 'css-loader',

    options: {

      sourceMap: options.sourceMap,

      minimize:true

    }

  }

  const postcssLoader = {

    loader: 'postcss-loader',

    options: {

      sourceMap: options.sourceMap

    }

  }

  // generate loader string to be used with extract text plugin

  function  generateLoaders (loader, loaderOptions) {

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {

      loaders.push({

        loader: loader + '-loader',

        options: Object.assign({}, loaderOptions, {

          sourceMap: options.sourceMap

        })

      })

    }

    // Extract CSS when that option is specified

    // (which is the case during production build)

    if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        publicPath: '../../',         // 注意配置這一部分，根據目錄結構自由調整

        fallback: 'vue-style-loader'

      })

    } else {

      return ['vue-style-loader'].concat(loaders)

    }

  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html

  return {

    css: generateLoaders(),

    postcss: generateLoaders(),

     less: generateLoaders('less'),

    sass: generateLoaders('sass', { indentedSyntax: true }),

    scss: generateLoaders('sass'),

    stylus: generateLoaders('stylus'),

    styl: generateLoaders('stylus')

  }

}

　　注意標紅的代碼段，稍微會寫代碼的人應該能看懂這段代碼的意思，於是博主抱着嘗試的心情，將return部分改為：

 less: generateLoaders('less', { javascriptEnabled: true })

　　再次運行，成功！

查看頁面效果：

原來藍色的主題色變為了博主自己設置的“紫色”，完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏