less-plugin-remove-antd-global-styles-fix

fork from less-plugin-remove-antd-global-styles

less-plugin-remove-antd-global-styles

This is a less plugin that removes ant-design global styles.

It works well with vite, webpack, rollup and babel-plugin-import.

Solve https://github.com/ant-design/ant-design/issues/9363 .

How it works

It works by mapping the global.less into an empty file: https://github.com/csr632/less-plugin-remove-antd-global-styles/blob/main/src/index.ts

Usage

npm i -D less-plugin-remove-antd-global-styles

vite

If you are using vite, pass it to vite config:

1// vite.config.ts
2import { LessPluginRemoveAntdGlobalStyles } from 'less-plugin-remove-antd-global-styles'
3
4export default {
5  // ...
6  css: {
7    preprocessorOptions: {
8      less: {
9        // put less plugin here
10        plugins: [new LessPluginRemoveAntdGlobalStyles()],
11      },
12    },
13  },
14}

webpack

If you are using webpack, pass it to less-loader options:

1// webpack.config.js
2const { LessPluginRemoveAntdGlobalStyles } = require('less-plugin-remove-antd-global-styles');
3
4module.exports = {
5  ...
6    {
7      loader: 'less-loader',
8      options: {
9        lessOptions: {
10          plugins: [
11            new LessPluginRemoveAntdGlobalStyles(),
12          ],
13          javascriptEnabled: true,
14        },
15      },
16    },
17  ...
18};

Stackblitz demo: https://stackblitz.com/edit/webpack-5-react-starter-exaaw5?file=webpack.config.js

rollup

If you are using rollup, pass it to rollup-plugin-postcss:

1// rollup.config.js
2import { LessPluginRemoveAntdGlobalStyles } from 'less-plugin-remove-antd-global-styles'
3
4export default {
5  plugins: [
6    postcss({
7      use: {
8        less: {
9          plugins: [new LessPluginRemoveAntdGlobalStyles()],
10        },
11      },
12    }),
13  ],
14}

babel-plugin-import

If you are using babel-plugin-import to do import-on-demand, you should pass style: true to the babel plugin (so that it will import .less files instead of .css files). Here is a babel.config.json example:

1{
2  "plugins": [
3    [
4      "babel-plugin-import",
5      {
6        "libraryName": "antd",
7        "style": true
8      }
9    ]
10  ]
11}

Tips

You may want to add some reasonable global styles to your own stylesheet after removing global styles from antd. For example, you probably want to keep these styles:

1/* your-own-global-style.less  */
2
3/* 
4pick some reasonable global styles from
5https://github.com/ant-design/ant-design/blob/master/components/style/core/global.less
6*/
7
8*,
9*::before,
10*::after {
11  box-sizing: border-box;
12}
13
14/* you can make reset styles only take effect within antd elements */
15*[class*='ant-'] {
16  a {
17    text-decoration: none;
18  }
19}