Extract CSS variables that change dynamically through JS Function:window.replaceVariable
,
- 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).
- 第一步 引入包
const configureWebpack =require('webpack-plugin-css-variable');
- 第二步 定义webpack plugin
new configureWebpack({matchVariables: {main: '#456789'}})
- 第三步 任何地方调用方法实现换肤
window.replaceStyleVariable({main:'#987654'})
-
优化 css 提取,将含css变量的css内容从主css抽离,独立单独主题style