其他分享
首页 > 其他分享> > vue项目组件库iview主题色定制

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