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

　　再次运行，成功！

查看页面效果：

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

标签：generateLoaders,vue,cnpm,less,loader,sourceMap,组件,options,iview
来源： https://www.cnblogs.com/massami1999/p/12794717.html