位置: 编程技术 - 正文

webpack构建换肤功能的思路详解(webpack 主题切换)

编辑:rootadmin

推荐整理分享webpack构建换肤功能的思路详解(webpack 主题切换),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:webpack 主题切换,webpack 主题切换,webpack实现,webpack实现,怎么使用webpack构建项目,怎么使用webpack构建项目,怎么使用webpack构建项目,怎么使用webpack构建项目,内容如对您有帮助,希望把文章链接给更多的朋友!

最近项目中要实现一个换肤的功能,大体想了下,记录一下思路

要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个

打包生成多份皮肤文件因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件,每个入口文件会提取出一个css文件

app.js中

blue.styl 蓝色皮肤

webpack构建换肤功能的思路详解(webpack 主题切换)

引入了相应的皮肤样式文件,这样,webpack打包后就会生成几个无用的js文件和一系列皮肤样式文件

到这一步,就得到了需要的皮肤文件,但是需要注意的是,webpack会将生成的js、css路径插入到模板html中,所以,我们打开构建后生成index.html会看到

</html>操作index.html接下来就需要操作打包后的index.html,将多余的js引用删掉,将皮肤路径提取出来,然后将皮肤引用删掉也就是要改成这样的文件

extractCss()最后到这里,运行 webpack && node cssExtract.js,index.html就变成上面期望的那样,我们得要了皮肤文件的一个mapping,并保存在window.cssUrls中,接下来,通过切换按钮的方式切换皮肤还是什么其他的就可以自由发挥了.需要说明的是,换肤功能的重点是对样式的重构,将需要换肤的所有样式提取到一起,通过变量来设置不同的主题

总结

以上所述是小编给大家介绍的webpack构建下换肤功能的实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

JS基于贪心算法解决背包问题示例 本文实例讲述了JS基于贪心算法解决背包问题。分享给大家供大家参考,具体如下:贪心算法:在对问题求解时,总是做出在当前看来是最好的选择。也

JS实现网页抢购功能(触发,终止脚本) 以下我们是通过chrome浏览器的开发者功能,实现如何用JS代码完成抢购功能以及如何通过chrome浏览器调试并加载自己写的JS。身为一名前端开发工程师,

JS使用贪心算法解决找零问题示例 本文实例讲述了JS使用贪心算法解决找零问题。分享给大家供大家参考,具体如下:前面介绍了JS贪心算法解决背包问题,这里再来看看找零问题的解决

标签: webpack 主题切换

本文链接地址:https://www.jiuchutong.com/biancheng/369883.html 转载请保留说明!

上一篇:Vim快速合并行及vim 将文件所有行合并到一行(vim多行匹配)

下一篇:JS基于贪心算法解决背包问题示例(js基于贪心算法实验报告)

  • 符合条件的小型微利企业所得税税率为
  • 企业投资收益要开发票吗
  • 出口退税一般退什么税
  • 补缴以前年度附加税如何入账
  • 在建工程转固定资产后如何计提折旧
  • 设定受益计划会计处理案例
  • 加计抵减怎么入账
  • 城建税和教育附加税
  • 政策信息咨询服务要到哪个部门办理资质
  • 税局代开专票如何做账务处理?
  • 私车公用税务政策性文件
  • 个人抬头的通讯费可以做费用吗
  • 车辆租赁费可以开专票吗
  • 废旧物资回收需要什么手续
  • 工资薪金中的误餐补助,征收个人所得税
  • 进项税额转出多转了怎么办
  • 事业单位打印费计入什么科目
  • 简易计税劳务分包发票可以差额抵扣吗
  • 固定资产减值测试时预计其未来现金流量不应考虑的因素
  • linux中php的作用
  • PHP:pg_result_error()的用法_PostgreSQL函数
  • php爬虫源码
  • fsacder2e是什么文件夹
  • 现金折扣的账务处理最新规定
  • php实现图片上传的方法
  • 什么叫相机标定
  • 无形资产的处置方式
  • 如何修改wordpress主题
  • 施工企业应承担的主要责任和义务
  • 贷款利息现金流量表什么项目
  • 个税申请退税流程
  • 收集整理数据
  • 小规模纳税人差额征收税率是多少
  • 结转材料成本差异所需科目
  • 新会计准则哪一年颁布
  • 计提工会经费是什么工资项目
  • 缴纳增值税的会计处理方法
  • 劳务派遣人员的档案会保存在用人单位吗
  • 丢失增值税专用发票的征管政策
  • 公司收到财政局奖励怎么记账
  • 注销的企业
  • 个体户能开增票吗?
  • 资产负债表日后非调整事项应当在附注中披露
  • 接受捐赠的增值税怎么处理
  • 长期借款涉及哪些账户
  • 材料按计划成本计价下,外购材料结算
  • 职工宿舍怎么入账
  • 公司购轿车会计分录怎么做
  • 非同一控制下企业合并发生的审计费
  • 开发阶段的支出计入什么科目
  • 股东实收资本超额到位
  • 商业汇票贴现必须具备的条件
  • 银行账和实际金额对不上
  • 工业投资范围是什么
  • 工业企业外购材料采购成本包括
  • win10预览设置
  • centos 安装chia
  • xp系统禁止程序联网
  • 怎么删除隐藏文件夹win 10
  • 根据自己的需求配置一台电脑
  • windows默认程序设置
  • win7电脑磁盘突然不见了怎么办
  • win7电脑关机后自动开机怎么回事
  • android app 源码
  • 简单总结译码器和数据选择器的作用
  • Android游戏开发pdf
  • unity用鼠标控制物体移动
  • node.js用途
  • linux命令行怎么用
  • 基于JAVASCRIPT实现的可视化工具是
  • 日拱一卒下一句是什么
  • python jsonp
  • python接口编写
  • jQuery ztree实现动态树形多选菜单
  • 网页中实现浏览的快捷键
  • js写后端用什么框架
  • 文化事业建设费是什么税
  • 回迁房办房产证需要交多少钱
  • 对方申请了红字信息表我这边怎么操作
  • 微信 税务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设