一：定义js变量并在less-loader中覆盖
1.定义theme.js
const ThemeOneDesign = {'primary-color':'#002a3e'}
2. 修改less-loader
const ThemeOneDesign = require(path.resolve('./src/theme/theme'));
lessLoaderOptions: {
lessOptions: {
modifyVars: {...ThemeOneDesign}
}
}
3. 复写新建less文件并复写原antd样式
@import '../../node_modules/antd/dist/antd.less';
.ant-btn {
&:hover,
&:focus {
color: #0067c5;
border-color: #99d9f0;
background: #ccecf8;
}
}
二：定义less变量，并在less-loader中引入
1. 定义antd.reset.less:
@white: #ffffff;
@red: #c4262e;
@primary-color: #002a3e;
@primary-color-hover: #19367f;
2. 修改 less-loader:
lessLoaderOptions: {
lessOptions: {
hack: `true; @import (reference) "${path.resolve(
'src/styles/antd.reset.less'
)}";`,
javascriptEnabled: true
}
}
3. 复写新建less文件并复写原antd样式
@import '../../node_modules/antd/dist/antd.less';
@import 'src/styles/antd.reset.less';
.ant-btn {
// default button
&:hover,
&:focus {
color: @primary-color;
background: @error-color;
}
}
