ant-design-vue antd-theme-webpack-plugin 動態改變主題
安裝
npm install -D antd-theme-webpack-plugin
關鍵原始碼
構造器選項:
const defaulOptions = {
varFile: path.join(__dirname, "../../src/styles/variables.less"),
antDir: path.join(__dirname, "../../node_modules/antd"),
stylesDir: path.join(__dirname, "../../src/styles/antd"),
themeVariables: ["@primary-color"],
indexFileName: "index.html",
generateOnce: false,
lessUrl:
"https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",
publicPath: ""
};
編譯過程:
compiler.hooks.emit.tapAsync('AntDesignThemePlugin', (compilation, callback) => {
const less = `
<link rel="stylesheet/less" type="text/css" href="${options.publicPath}/color.less" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="${options.lessUrl}"></script>
`;
if (
options.indexFileName &&
options.indexFileName in compilation.assets
) {
const index = compilation.assets[options.indexFileName];
let content = index.source();
if (!content.match(/\/color\.less/g)) {
index.source = () =>
content.replace(less, "").replace(/<body>/gi, `<body>${less}`);
content = index.source();
index.size = () => content.length;
}
}
從原始碼可看出:若 index.html 檔案中沒有相關樣式、指令碼程式碼時,會自動在 body 開始標籤新增
使用
環境版本:
- @vue/cli 4.5.8
- ant-design-vue 1.7.2
- antd-theme-webpack-plugin 1.3.7
- less 3.0.4
- less-loader 5.0.0
在 vue.config.js 中
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: { },
javascriptEnabled: true
}
},
extract: false
},
configureWebpack: {
plugins: [
new AntDesignThemePlugin({
// ant 目錄
antDir: resolve("./node_modules/ant-design-vue"),
// 樣式目錄 會獲取該目錄下的 less 檔案編譯
stylesDir: resolve("./src/styles"),
// 變數檔案
varFile: resolve(
// ant-design-vue 變數檔案
// "./node_modules/ant-design-vue/lib/style/themes/default.less"
// 自定義變數檔案 該檔案需要引入 ant-design-vue 變數檔案:@import "~ant-design-vue/lib/style/themes/default.less";
"./src/styles/themes/variables.less"
),
themeVariables: [
"@primary-color",
"@secondary-color",
"@text-color",
"@text-color-secondary",
"@heading-color",
"@layout-body-background",
"@btn-primary-bg",
"@layout-header-background"
],
generateOnce: false,
// 預設
indexFileName: "index.html",
// 預設
lessUrl:
"https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",
// 實際上是專案名
publicPath: "/[proj_name]"
// customColorRegexArray: [] // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
})
]
};
[proj_name] 需要修改成自身的專案名
執行 npm run build
命令生成 color.less 檔案:遇到以下異常:
Building for production...error [LessError: error evaluating function `darken`: color.toHSL is not a function] {
message: 'error evaluating function `darken`: color.toHSL is not a function',
stack: undefined,
type: 'Runtime',
filename: 'input',
index: 363260,
line: 16057,
column: 32,
callLine: NaN,
callExtract: undefined,
extract: [
"@table-header-sort-active-bg: ~'darken(@table-header-bg, 3%)';",
'@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);',
'@table-selection-column-width: 60px;'
]
}
需要在 ant-design-vue 變數檔案【node_modules/ant-design-vue/lib/style/themes/default.less】加上以下使用 ===========
包裹的程式碼:建議在 // Table 註釋下加上
// Table
// --
===========
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;
===========
@table-header-bg: @background-color-light;
加上後執行 npm run build
命令成功生成 color.less 檔案 檢視 index.html 檔案可發現 body
開始標籤下多出相關的樣式、指令碼程式碼:
<body>
<link rel="stylesheet/less" type="text/css" href="/vue-antd-admin/color.less"><script>window.less = {
async: false,
env: true ? 'production' : 'development',
javascriptEnabled: true,
modifyVars: { },
};</script><script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.js"></script><noscript><strong>We're sorry but Vue Antd Admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
若要在開發環境中執行,需要將 color.less 檔案複製到 public 目錄,並在 public
目錄中的 index.html
的 body
開始標籤下新增以下程式碼:
<link rel="stylesheet/less" type="text/css" href="<%= BASE_URL %>color.less" />
<script>
window.less = {
async: false,
env: 'production',
javascriptEnabled: true,
modifyVars: { },
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.js"></script>
執行 npm run serve
命令後,在控制檯測試
window.less.modifyVars({
"@primary-color": "#db8b12",
'@link-color': '#ee5e7b',
'@btn-primary-bg': '#db8b12',
"@primary-color2": "#db8b12"
})
@primary-color2 在自定義變數檔案定義,在其他樣式檔案使用時,需要先引入自定義變數檔案
至此,可以成功動態修改主題,但是耗費效能。在 ant-design-vue 官方的後臺管理系統 ant-design-vue-pro 使用 webpack-theme-color-replacer 動態修改,無需編譯 less
相關文章
- 動態改變類結構 & 動態…
- 動態路由,透過id改變,改頁面路由
- IOS 動態改變cell的高度iOS
- Android動態改變佈局Android
- 動態改變螢幕設定 (轉)
- [譯] CSS 變數和 JavaScript 讓應用支援動態主題CSS變數JavaScript
- javascript動態改變css3的animationJavaScriptCSSS3
- js動態改變css偽類樣式JSCSS
- 【layui】 laydate動態改變日期最小值UI
- 動態改變quartz的觸發器策略?quartz觸發器
- 使用RecyclerView動態改變item時遇到的坑View
- 根據使用者不同的選擇動態改變程式的標題
- create-react-app中使用antd並且改變主題ReactAPP
- WEUI picker元件無法js動態改變選項UI元件JS
- uni-app 動態修改主題色APP
- 動態規劃9:變態跳臺問題動態規劃
- javascript動態改變元素css樣式簡單介紹JavaScriptCSS
- 利用HtmlGenericControl類,動態改變Title文字 (轉)HTML
- flutter使用Provider完成動態主題功能FlutterIDE
- Android 主題動態切換框架:PrismAndroid框架
- javascript動態改變單選按鈕radio的選中狀態JavaScript
- 檔案屬主改變的情況
- 解決 Retrofit 多 BaseUrl 及執行時動態改變 BaseUrl ?
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- 動態改變actionbar的menu選單MenuItem的顯示UI
- Unreal Cook Book:動態改變材質的顏色等引數Unreal
- 解決Retrofit多BaseUrl及執行時動態改變BaseUrl(二)
- 動態改變螢幕設定 解析度、顏色等。 (轉)
- 動態改變網頁內容(CHtmlView/CWebBrowser2/IE) (轉)網頁HTMLViewWeb
- Android 動態佈局 動態生成 銷燬控制元件 改變控制元件的位置等Android控制元件
- VueRouter改變頁面標題Vue
- Ipsos:奧運主題調查顯示 科技正在改變觀賽方式
- jquery “做頁面滾動到某屏時改變狀態標題” 所用知識點記錄jQuery
- Android開發——Java程式碼動態改變顏色字型的方法AndroidJava
- 請問如何在java程式中動態改變輸入法設定。Java
- Linux下共享VG改變活動狀態Linux
- react+antd 使用腳手架動態修改主題色React
- Android 動態佈局實現多主題切換Android