antdv ant-design-vue 自定义主题颜色
方法1:修改配置文件项目根目录 vue.config.js// vue.config.jsmodule.exports = {css: {loaderOptions: {less: {lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。javascriptEnabled: true}}},},缺点:需重启项目才能
·
方法1:修改配置文件(不推荐)
项目根目录 vue.config.js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。
javascriptEnabled: true
}
}
},
},
缺点:
- 需重启项目才能生效
- json格式写样式变量反人类
- 需区分less-loader版本,否则不生效
优点:
- 能生效,其余没啥优点
方法2:less文件修改(推荐)
删除原来引用的 antdv 主题样式,改成你自己的 less 样式
因为 antdv 是用 less 语法来写的,所以可以写自定义 less 来覆盖
// 删除原antdv引用的主题样式
// import 'ant-design-vue/dist/antd.css';
// import 'ant-design-vue/dist/antd.less';
// 引用自定义样式文件
import './common/theme.less';
新建 ./common/theme.less
文件
// antdv默认样式文件 node_modules/ant-design-vue/lib/style/themes/default.less
// 先引入框架样式less
@import '~ant-design-vue/dist/antd.less';
// 这里自定义样式变量
@primary-color: #f99; // 自定义的主题颜色
修改后即可生效
缺点:
- 需要学习 less 语法
优点:
- 不需重启项目,立即生效
- 用 less 写样式变量符合书写习惯
更多推荐
已为社区贡献3条内容
所有评论(0)