Antd样式覆盖

一：定义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;

  }

}