webpack构建换肤功能的思路详解

站长资源 2024/11/26 佚名

52 1538 52

DDR爱好者之家 Design By 杰米

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

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

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

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中

 import "./app.styl" //整个项目的样式，在各种皮肤下都保持不变的那部分
theme.blue.color.js 蓝色皮肤js文件
import "./theme/blue.styl"

blue.styl 蓝色皮肤

@require "./css/skinTheme/var.blue" //样式变量，整体为蓝色风格的颜色值
@require "./css/skinTheme/theme.color" //提取出来的需要换肤的那部分样式如代码所示，几个主题js文件中只是单纯的

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

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

<html>
 <head>
  <link rel="stylesheet" href="app.xxxx.css" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" href="defaultTheme.xxxxx.css" rel="external nofollow" >
  <link rel="stylesheet" href="orangeTheme.xxxxx.css" rel="external nofollow" >
  <link rel="stylesheet" href="blueTheme.xxxxx.css" rel="external nofollow" >
 </head>
 <body>
  <script src="/UploadFiles/2021-04-02/app.xxxx.js">

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


/build/index.html
<html>
 <head>
  <script>
   window.cssUrls={
    "defaultTheme":"/defaultTheme.4bdb738cdc062e7842ce.css",
    "orangeTheme":"/orangeTheme.4bdb738cdc062e7842ce.css","blueTheme":"/blueTheme.4bdb738cdc062e7842ce.css"
   }
  </script>
  <link rel="stylesheet" href="app.xxxx.css" rel="external nofollow" rel="external nofollow" >
 </head>
 <body>
  <script src="/UploadFiles/2021-04-02/app.xxxx.js">

extractCss()最后到这里，运行 webpack && node cssExtract.js,index.html就变成上面期望的那样，我们得要了皮肤文件的一个mapping,并保存在window.cssUrls中，接下来，通过切换按钮的方式切换皮肤还是什么其他的就可以自由发挥了.

需要说明的是，换肤功能的重点是对样式的重构，将需要换肤的所有样式提取到一起，通过变量来设置不同的主题


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

webpack换肤功能

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“webpack构建换肤功能的思路详解”

暂无评论...

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

webpack构建换肤功能的思路详解

基于vue.js的分页插件详解

vue实现商城上货组件简易版

评论“webpack构建换肤功能的思路详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接