antd样式变量覆盖无效果

JeremyChen
  • 2k

项目模版是以前的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的官网写的,可是无效,为什么?

回复
阅读 4.4k
3 个回答

参考官网 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 的样式覆盖了。

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

你知道吗?

宣传栏