vue在線動(dòng)態(tài)切換主題色方案-創(chuàng)新互聯(lián)

主要原理是利用webpack插件webpack-theme-color-replacer提取相關(guān)顏色css然后根據(jù)配置動(dòng)態(tài)生成替換的css

10年積累的成都做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有大名免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

具體實(shí)現(xiàn)步驟如下：

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在線動(dòng)態(tài)切換主題色方案-創(chuàng)新互聯(lián)
分享路徑：http://m.jiaotiyi.com/article/essoc.html