antd样式变量覆盖无效果

Question

项目模版是以前的dva脚手架生成的！引入antd的样式文件是在项目的index.js文件中引入的

import 'antd/dist/antd.less'
import './less/index.less'

下面是自己额样式文件，里面有相应的变量，例如

@primary-color: red;

但是还是覆盖不了原来的antd的样式蓝色，
配置文件如下：

entry: 'src/index.js',
  define: {
    APP_TYPE: process.env.APP_TYPE || '',
  },
  env: {
    development: {
      extraBabelPlugins: [
        'dva-hmr',
        'transform-runtime',
        ['import', {libraryName: 'antd', style: true}]
      ]
    },
    production: {
      extraBabelPlugins: [
        'transform-runtime',
        ['import', {libraryName: 'antd', style: true}]
      ]
    }
  },
  publicPath: '/',

style == true是按照antd的官网写的，可是无效，为什么？

Answer 1

Answer 2

参考官网 https://ant.design/docs/react...
如果是使用配置 less 变量文件的方式，就不需要配置 style: true

配置 less 变量文件

另外一种方式是建立一个单独的 less 变量文件，引入这个文件覆盖 antd.less 里的变量。

@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量

注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。

没有生效？

注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。

Answer 3

这个是因为用了babel-plugin-import之后组件样式总是处于整体引入变量覆盖less之后导致的，
当使用题主这种方式覆盖变量的时候，需要吧['import', {libraryName: 'antd', style: true}]这个配置中的style: true删除，改为['import', {libraryName: 'antd'}]，这样每次import组件的时候就不会连着样式一块引入了，也就不会覆盖自己写的变量了