位置: 编程技术 - 正文

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

  • 个人所得税个人信息怎么填写
  • 报税申报不了
  • 小规模免缴增值税吗
  • 增值税有哪几类
  • 个人所得税征收标准表
  • 一般纳税人应交增值税怎么算
  • 第一次购买税控盘
  • 林业局会计咋样做账
  • 公司注册住所要求
  • 复印的原始凭证可以作为记账依据吗
  • 资产减值损失管理措施
  • 业务员出差借款,用途写什么
  • 调增收入的会计分录
  • 无形资产要入账吗
  • 银行收付款通知短信
  • 开餐饮发票的经营范围是怎样的?
  • 个人所得税返还奖励财务人员做账
  • 虚开进项税额转出会计分录
  • 技术转让怎么算成本
  • 纳税申报方式怎么修改
  • 材料销售的账务处理
  • 企业安排残疾人就业有啥优惠政策
  • 进口应税消费品所支付的金额不包括
  • 政府补助企业的钱要交税吗
  • 个人技术服务费增值税税率是多少啊
  • 企业开票信息可以改吗
  • 社保支付账号是什么
  • 收到往来款的账务处理
  • apple取消支付方式
  • linux的ip查看
  • php中session和cookie的区别说法错误的是
  • 增值税进项税额属于什么会计科目
  • 超过认证期的发票怎么办
  • 自然人股东是
  • vue显示pdf
  • three.js gui
  • 购买增值税税控系统如何抵扣增值税
  • 比特币形式投资是否诈骗
  • 注意!PHP 7中不要做的10件事
  • 车间主要有哪些事故风险
  • vim8.2插件
  • 应交税费中应交企业所得税为负数怎么调报表
  • 劳务报酬可以专项附加扣除吗
  • index.php备份文件
  • 国内源码平台
  • 综合所得计税依据
  • 农产品增值税免税发票怎么抵扣
  • 个税清算所得税怎么计算
  • 资本公积和盈余公积是什么意思
  • 消防工程公司的成本包括哪些
  • 收到供应商的赔偿款要开票吗
  • 向银行按揭贷款时,收入流水不够怎么办?
  • 投标保证金如何规定
  • 合同权利义务包含债务吗
  • 支付劳务公司的劳务费如何扣缴个人所得税?
  • 购入软件的账务处理
  • sqlserver中时间类型
  • mysql怎么设置自增主键
  • win7操作系统在哪儿卖
  • xp系统如何清理缓存
  • 打造安全稳定
  • linux动态库的制作
  • windows域环境搭建
  • 电脑xp系统运行速度慢
  • linux重启shell
  • 磁盘修复完成以后怎么办
  • win10系统怎么刻录光盘?win10刻录光盘详细图文步骤
  • css命名大全
  • js插件写法
  • xp系统explorer停止工作
  • js 运算符
  • 正则表达式/a/g
  • js中new操作符工作原理
  • unity每帧调用
  • javascript怎么学好
  • 蓝牙模块手机程序
  • jquery 插件编写
  • 广东省地方税务局
  • 香港居民个人转让境内股权所得个人所得税税率
  • 江苏国税电子税务局怎么登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设