安装

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

ant-design-vue antd-theme-webpack-plugin 动态改变主题相关推荐

ant design vue input change_Ant-design-vue项目实现动态路由
vue项目实现动态路由的方式大体可分为两种: 1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 2.后台传来当前用户对应权限的路由表,前端通过调接口拿到路由信息后处 ...
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
Ant Design Vue快速入门教程
Ant Design Vue Ant Design是蚂蚁金服出品的一款前端UI库,官方的介绍是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户 ...
Ant Design Vue 2.x+ 支持所有的现代浏览器。
兼容性 # Ant Design Vue 2.x+ 支持所有的现代浏览器. 如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x. npm config ...
Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...

ant-design-vue antd-theme-webpack-plugin 动态改变主题

安装

关键源码

使用

ant-design-vue antd-theme-webpack-plugin 动态改变主题相关推荐

最新文章

热门文章