}
},
优点：
支持动态切换
支持动态色值
不需要内置多份样式
缺点：
业务开发过程中需要对ui给出的色值重定义，业务开发需要有一定的规则
无法修改背景图片
无法对懒加载的样式做处理，需要初始化加载全局所有样式
const ExtractTextPlugin = require('extract-text-webpack-plugin')// 抽离css
module: {
loaders: [
{//抽离css 通过link加载
test: /.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
...
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].css'
allChunks: true // 打包所有页面css到同一个css 文件
})
]
无法动态修改背景图片
方式三：编译时多主题全量构建
实现：
定义多套样式
构建时将多套样式主题作为独立构建入口，构建出主题静态文件css文件
业务运行时动态加载不同的主题文件
优点：
支持动态切换主题
业务开发样式分离
编译时构建性能较好 缺点：
构建工具配置较为复杂，适用单入口应用，对多入口的支持不友好
需要定义全局 less 文件，在入口引入
业务需要额外操作
配合 rel=”alternate stylesheet” 可预加载备选主题样式
方式四： 编译时选择性构建
实现：
内置多套皮肤
构建时传入参数，根据不同的构建参数加载不同的主题样式文件
优点：
构建工具配置较为简单，不需要业务做额外操作
多入口应用支持度好
缺点：
不支持动态切换
多个项目需要构建多次，需要构建系统支持
方式五：less动态变量
实现：
修改构建脚本，将所有页面less文件抽到同一个文件中
不编译less，页面直接加载less文件
使用less.js 在客户端编译less 文件
less: {
modifyVars: {},
javascriptEnabled: true
}优点：
支持动态切换
支持动态色值
缺点：
客户端编译较耗性能/耗时
需要额外加载less.js mini文件size: 131KB
方式六：css变量
实现：
在需要变化的css属性定义变量
:root {
--main-bg-color: pink;
}body {
background-color: var(--main-bg-color);
}
在运行时动态的修改变量
document.body.style.setProperty('--primary', '#7F583F');
