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 })

　　再次运行，成功！

查看页面效果：

原来蓝色的主题色变为了博主自己设置的“紫色”，完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏