您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何在vue-cli3項目中使用webpack4實現(xiàn)換膚功能”,在日常操作中,相信很多人在如何在vue-cli3項目中使用webpack4實現(xiàn)換膚功能問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”如何在vue-cli3項目中使用webpack4實現(xiàn)換膚功能”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
首先我們用vue-element-admin
這個開源的后臺管理系統(tǒng)項目來做demo演示,為了便于做二次開發(fā),下載vue-admin-template來開發(fā)。
// 從github下載vue-admin-template clone https://github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template npm install npm run dev
運行成功后的效果
安裝style-loader處理器
因為vue-admin-template
項目是添加過sass-loader
依賴的,所以不用我們再次安裝,在上一步就已經(jīng)安裝好了。
npm install style-loader --save-dev
創(chuàng)建主題文件
在src目錄下創(chuàng)建theme-chalk、theme-light
主題文件夾
在兩個主題目錄下創(chuàng)建index.useable.scss文件 ?
在index.useable.scss
中寫入樣式
// theme-chalk/index.useable.scss body { background: red; } // theme-light/index.useable.scss body { background: green; }
到此,我們的主題樣式都已經(jīng)建好了,現(xiàn)在要將主題應用上去
在vue.config.js中增加style-loader/useable
vue-cli2根vue-cli3的配置區(qū)別還是挺大的,我在配置的過程中遇到很多坑,因為vue-cli3沒有了webpack.config.js文件,我們在配置webpack的時候無法根據(jù)老文檔來配置,需要熟悉cli3的webpack-chain來鏈式修改配置,但是文檔很少,配置的過程中異常困難。
在配置文件中chainWebpack鏈式修改webpack配置就能成功應用loader了,話不多說,直接上代碼,
// 換膚loader const scss = config.module.rule('scss').toConfig(); const useable = { ...scss.oneOf[3], test: /\.useable.scss$/ }; useable.use = [...useable.use]; useable.use[0] = { loader: 'style-loader/useable' }; config.module.rule('scss').merge({ oneOf: [useable] });
使用主題
在準備工作都做好后,接下來我們開始使用主題樣式。
之前說的為什么要用style-loader
來做換膚呢?是因為style-loader提供了useable這一API,可動態(tài)加載刪除link文件。具體詳情請自行去看看style-loader。
在src目錄下,創(chuàng)建theme.js文件
const cache = {}; const themeAction = { chalk() { if (!cache.chalk) { cache.chalk = import('./styles/theme-chalk/index.useable.scss'); } return cache.chalk; }, light() { if (!cache.light) { cache.light = import('./styles/theme-light/index.useable.scss'); } return cache.light; } }; let current = null; async function setTheme(theme) { if (themeAction[theme]) { const style = await themeAction[theme](); if (current) { current.unref(); } style.ref(); current = style; } } window.setTheme = setTheme; export default setTheme;
在main.js中,引入theme.js。
import setTheme from './theme' // 使用主題 setTheme('chalk')
重啟服務,查看效果
到此,關于“如何在vue-cli3項目中使用webpack4實現(xiàn)換膚功能”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。