Gathering detailed insights and metrics for less-plugin-remove-antd-global-styles
Installations
npm install less-plugin-remove-antd-global-stylesDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.15.1
NPM Version
8.11.0
Score
72
Supply Chain
98.8
Quality
75.2
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Download Statistics
Total Downloads
33,880
Last Day
60
Last Week
363
Last Month
1,533
Last Year
16,320
Bundle Size
1.64 kB
Minified
757.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.2
Package Id
less-plugin-remove-antd-global-styles@1.0.2
Unpacked Size
20.46 kB
Size
6.65 kB
File Count
13
NPM Version
8.11.0
Node Version
16.15.1
Total Downloads
Cumulative downloads
Total Downloads
33,880
Last day
-18.9%
60
Compared to previous day
Last week
-32.4%
363
Compared to previous week
Last month
32.5%
1,533
Compared to previous month
Last year
0.3%
16,320
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
4
Versions
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:
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 }, 14 }, 15 }, 16 ... 17};
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. 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.css */ 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*::before, 9*::after { 10 box-sizing: border-box; 11} 12 13a { 14 text-decoration: none; 15}
No vulnerabilities found.
No security vulnerabilities found.