vue在线动态切换主题色方案-创新互联-成都快上网建站

vue在线动态切换主题色方案-创新互联

主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css

10年积累的成都做网站、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有大名免费网站建设让你可以放心的选择与我们合作。

具体实现步骤如下:


1.添加webpack插件,新建文件webpack/themePlugin.js

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
const config = require('../src/config/appConfig')
module.exports = new ThemeColorReplacer({
  fileName: 'css/theme-colors.[contenthash:8].css',
  matchColors: [
    ...forElementUI.getElementUISeries(config.themeColor), //element-ui主色系列
    // '#0cdd3a', //自定义颜色
  ],
  changeSelector: forElementUI.changeSelector,
  isJsUgly: process.env.NODE_ENV !== 'development',
  // injectCss: false,
  // resolveCss(resultCss) { // optional. Resolve result css code as you wish.
  //   return resultCss + youCssCode
  // }
})

分享题目:vue在线动态切换主题色方案-创新互联
分享路径:http://kswjz.com/article/essoc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流