一：定義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. 復(fù)寫新建less文件并復(fù)寫原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. 復(fù)寫新建less文件并復(fù)寫原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;

? }

}