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 ant-design/ant-design#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:
// vite.config.ts
import { LessPluginRemoveAntdGlobalStyles } from 'less-plugin-remove-antd-global-styles'
export default {
// ...
css: {
preprocessorOptions: {
less: {
// put less plugin here
plugins: [new LessPluginRemoveAntdGlobalStyles()],
},
},
},
}
webpack
If you are using webpack, pass it to less-loader options:
// webpack.config.js
const { LessPluginRemoveAntdGlobalStyles } = require('less-plugin-remove-antd-global-styles');
module.exports = {
...
{
loader: 'less-loader',
options: {
lessOptions: {
plugins: [
new LessPluginRemoveAntdGlobalStyles(),
],
javascriptEnabled: true,
},
},
},
...
};
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:
// rollup.config.js
import { LessPluginRemoveAntdGlobalStyles } from 'less-plugin-remove-antd-global-styles'
export default {
plugins: [
postcss({
use: {
less: {
plugins: [new LessPluginRemoveAntdGlobalStyles()],
},
},
}),
],
}
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:
{
"plugins": [
[
"babel-plugin-import",
{
"libraryName": "antd",
"style": true
}
]
]
}
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:
/* your-own-global-style.less */
/*
pick some reasonable global styles from
https://github.com/ant-design/ant-design/blob/master/components/style/core/global.less
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/* you can make reset styles only take effect within antd elements */
*[class*='ant-'] {
a {
text-decoration: none;
}
}
6 Oct 24, 2022
225 Jan 4, 2023
9 Feb 27, 2022
5 Apr 1, 2022
7 Apr 2, 2022
11 Nov 8, 2022
10 Nov 28, 2022
4 Nov 15, 2022
9 Nov 28, 2022
50 Jan 3, 2023