How to avoid modifying global styles?

[salihozdemir]

If i need to integrate ant-design as a part of an existing website, it's likely i want to prevent ant-design to override global styles. How can i do this?

Can we prevent global.less from loading?

[SolidZORO]

what file is this global.less? Is it from antd?

[salihozdemir]

Yes it comes from antd. I couldn't find a solution other than overriding.

[SolidZORO]

you can try

// .babelrc.js

plugins: [
    [
      'import',
      {
        libraryName: 'antd',
        style: false,   <--- edit this line to `false`
      },
    ]
  ],

and create antd-reset.less, like this:

@import '~antd/es/style/themes/index.less';
//@import '~antd/es/style/core/index.less';

@import '~antd/es/style/mixins/index.less';
//@import '~antd/es/style/core/base.less';
//@import '~antd/es/style/core/iconfont.less';
@import '~antd/es/style/core/motion.less';

// ...

[salihozdemir]

I created the reset-antd.less then imported it in _appjs. It's work perfectly yarn dev but when i build my project styles of ant components are not loaded. Is the less format in app.js the problem or is it adding a css globally? What should I do? I just couldn't find.

[15520065]

@salihozdemir Have you find the solution yet?