位置: 编程技术 - 正文

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基于贪心算法实验报告)

  • 销售货物业务的销项税额怎么计算
  • 企业自产的产品转为自用
  • 进项税多久有效
  • 企业所得税汇算清缴时间
  • 应收账款计入借方贷方
  • 企业账户被冻结可以去开其他账户吗
  • 做实验用的东西哪里可以买到
  • 发票认证抵扣后还有用吗
  • 平销返利企业所得税处理
  • 普通发票开折扣销售能冲减销售吗
  • 电费应收电费和实际电费
  • 0退税产品怎么征税
  • 物流 贷款
  • 企业收取客户利润违法吗
  • 税率调整之后税额的差异
  • 员工拓展培训进度怎么写
  • 所有的固定资产都需要计提折旧吗
  • 企业会主动对税吗
  • 税款滞纳金可以退吗
  • 分包与转包的区别 法院
  • 小微企业不超过300万所得税
  • 建筑服务中的其他建筑服务
  • 公立医院规章制度
  • 库存暂估入账
  • 红字冲回怎么做账
  • 小规模企业所得税按季度还是按年
  • 周转材料盘点报告单
  • win7桌面图标变成了lnk
  • 现金流量表的内涵及其编制基础
  • 坏账准备属于哪个会计科
  • 税金及附加包括个人所得税吗
  • 无法找到脚本文件vbs
  • 红冲暂估需要附件吗
  • 交易性金融资产属于什么科目
  • 预收的购货款属于收入吗
  • fp是什么文件
  • 销售收入与销售成本
  • 交易性金融资产属于流动资产
  • 二手房转让中转什么意思
  • 递延所得税资产借贷方向
  • php lcg_value与mt_rand生成0~1随机小数的效果对比分析
  • vue中使用md5加密
  • 出差托运行李公司报销吗
  • 托收的收款人是谁
  • 工厂道路设计规范
  • 个税申报汇算清缴流程
  • 以销售额和年末存货计算的存货周转率公式
  • 分配利润时会计分录
  • 内账应付账款怎么做账
  • 工资扣员工的罚款入什么科目
  • 实时缴税计入什么科目
  • 所得税纳税调增会计需要做业务处理吗
  • 认缴制下实收资本可以减少吗
  • 对公账户给私人账户转账,几天到账
  • 什么是结账?结账前要做哪些准备工作?
  • 所有符合条件x+5的绝对值加x- 2的绝对值等于七的数x
  • 英文版西游记
  • windows快速预览
  • 苹果电脑怎么截屏按哪个键
  • AquariumDesktop.exe进程危险吗 AquariumDesktop是什么进程
  • linux 修复系统
  • win10周年版
  • WIN10专业版怎么查看操作位数
  • linux find命令详解xargs
  • win7开启路由功能
  • windows7无法关闭密码保护共享
  • linux安装有哪几种方式
  • linux检查文件内容
  • cocos creator特效制作
  • js中的
  • 常用正则表达式汇总
  • shell脚本 -mtime
  • js面向对象编程实例
  • python,web
  • Unable to connect to zookeeper
  • 国家河南税务局
  • 印花税在哪里查询
  • 怀化市税务局领导
  • 怎样通过发票号码查询电子发票
  • 开展志愿服务关爱活动
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设