Webpack-plugin-css-variable NPM

webpack-plugin-css-variable

Extract CSS variables that change dynamically through JS Function:window.replaceVariable,

how to (3 steps)

Step1: import plugin in your webpack.config.js(don't forget to install plugin).

const WebpackCssVariable = require('webpack-plugin-css-variable');

step:2: config your plugin:

module.exports = {
  publicPath: './',
  css: {
    // CSS Modules 模块
    requireModuleExtension: false,
    //提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。 默认开发模式不开启，部署开启
    // 当需要测试主题的时候开启，无需测试关闭
    extract: true
  },
  configureWebpack: config => {
    config.plugins.push(new WebpackCssVariable({
      htmlFileName: 'index.html',
      injectToEntry: true,
      matchVariables: {
        main: '#42b983',
        mainHover: '#d1dd1d',
      }
    }))
  }
}

step3: call function in anywhere in your code.

window.replaceStyleVariable({ main: '#fff', mainHover: '#999' })

This step can be called any where (plugin has been injected to the html file ). The arguments need only one which is the stylesheet variable you want to replace to . Such as you want to change main to blue color , your argument will be : '{main:"blue"}',the key for this argument should math your config (step2).