摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整
source
最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路
要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個
打包生成多份皮膚文件因為項目是使用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會看到
操作index.html
接下來就需要操作打包后的index.html,將多余的js引用刪掉,將皮膚路徑提取出來,然后將皮膚引用刪掉
也就是要改成這樣的文件
/build/index.html
可以寫這樣一個操作文件的函數
cssExtract.js
const DISTPATH = "build/index.html" const cheerio = require("cheerio") const fs = require("fs") const chalk = require("chalk") const prefix = ["defaultTheme", "orangeTheme", "blueTheme"] const cssUrls = {} function extractCss() { fs.readFile(DISTPATH, "utf8", (err, data) => { if (err) { throw err } const $ = cheerio.load(data) /** * 刪除所有主題css,相關鏈接保存在window.cssUrls中 */ $("link").each((index, item) => { const href = $(item).attr("href") for (const val of prefix) { if (href.indexOf(val) !== -1) { cssUrls[val] = href $(item).remove() } } }) /** * 刪除無用的js */ $("script").each((index, item) => { const src = $(item).attr("src") for (const val of prefix) { if (src && src.indexOf(val) !== -1) { $(item).remove() } } }) //插入行內js $("base").after(``) fs.writeFile(DISTPATH, $.html(), err => { if (err) { throw err } console.log(chalk.cyan("extract css url complete. ")) }) }) } extractCss()最后
到這里,運行 webpack && node cssExtract.js,index.html就變成上面期望的那樣,我們得要了皮膚文件的一個mapping,并保存在window.cssUrls中,接下來,通過切換按鈕的方式切換皮膚還是什么其他的就可以自由發揮了.
需要說明的是,換膚功能的重點是對樣式的重構,將需要換膚的所有樣式提取到一起,通過變量來設置不同的主題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54430.html
摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路 要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...
摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路 要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...
摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:項目搭建用的,框架選擇的首先安裝支持然后去文件夾下的文件中,添加對的支持準備工作做好了,開始換膚新建一個文件夾,在里面新建一個文件定義一個方法,寫上需要的顏色參數如圖文件夾下再新建一個存放各類主題的文件,里面根據自己需求定義各類主題 項目搭建用的vue—cli,css框架選擇的iview1、首先安裝less支持 npm install --save-dev less-loader le...
閱讀 2521·2023-04-26 02:57
閱讀 1403·2023-04-25 21:40
閱讀 2155·2021-11-24 09:39
閱讀 3557·2021-08-30 09:49
閱讀 760·2019-08-30 15:54
閱讀 1166·2019-08-30 15:52
閱讀 2068·2019-08-30 15:44
閱讀 1274·2019-08-28 18:27