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 })
再次运行，成功！
查看页面效果：
原来蓝色的主题色变为了博主自己设置的“紫色”，完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏