要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个
打包生成多份皮肤文件因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件,每个入口文件会提取出一个css文件
rush:js;">
config.entry={
app: ['./src/app.js'],defaultTheme: ['./src/theme.default.color.js'],orangeTheme:['./src/theme.orange.color.js'],blueTheme:['./src/theme.blue.color.js'],}
app.js中
rush:js;">
import "./app.styl" //整个项目的样式,在各种皮肤下都保持不变的那部分
theme.blue.color.js 蓝色皮肤js文件
import "./theme/blue.styl"
blue.styl 蓝色皮肤
rush:js;">
@require "./css/skinTheme/var.blue" //样式变量,整体为蓝色风格的颜色值
@require "./css/skinTheme/theme.color" //提取出来的需要换肤的那部分样式如代码所示,几个主题js文件中只是单纯的
引入了相应的皮肤样式文件,这样,webpack打包后就会生成几个无用的js文件和一系列皮肤样式文件
到这一步,就得到了需要的皮肤文件,但是需要注意的是,webpack会将生成的js、css路径插入到模板html中,所以,我们打开构建后生成index.html会看到
rush:js;">
操作index.html接下来就需要操作打包后的index.html,将多余的js引用删掉,将皮肤路径提取出来,然后将皮肤引用删掉也就是要改成这样的文件
rush:js;">
/build/index.html
`)
fs.writeFile(disTPATH,$.html(),err => {
if (err) {
throw err
}
console.log(chalk.cyan('extract css url complete.\n'))
})
})
}
extractCss()最后到这里,运行 webpack && node cssExtract.js,index.html就变成上面期望的那样,我们得要了皮肤文件的一个mapping,并保存在window.cssUrls中,接下来,通过切换按钮的方式切换皮肤还是什么其他的就可以自由发挥了. 需要说明的是,换肤功能的重点是对样式的重构,将需要换肤的所有样式提取到一起,通过变量来设置不同的主题
总结
以上所述是小编给大家介绍的webpack构建下换肤功能的实现思路详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。