Browse Source
chore: 📦 Optimize npm package size (#23698 )
* improve custom theme import path
* reduce npm package size
pull/23703/head
偏右
5 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with
20 additions and
16 deletions
.antd-tools.config.js
.gitignore
.npmignore
docs/react/customize-theme.en-US.md
docs/react/customize-theme.zh-CN.md
docs/spec/colors.en-US.md
docs/spec/colors.zh-CN.md
webpack.config.js
@ -61,15 +61,14 @@ function finalizeCompile() {
function buildThemeFile ( theme , vars ) {
// Build less entry file: dist/antd.${theme}.less
fs . writeFileSync (
path . join ( process . cwd ( ) , 'dist' , ` antd. ${ theme } .less ` ) ,
` @import "../lib/style/ ${ theme } .less"; \n @import "../lib/style/components.less"; ` ,
) ;
// eslint-disable-next-line no-console
console . log ( ` Built a entry less file to dist/antd. ${ theme } .less ` ) ;
if ( theme === 'default' ) {
if ( theme !== 'default' ) {
fs . writeFileSync (
path . join ( process . cwd ( ) , 'dist' , ` antd. ${ theme } .less ` ) ,
` @import "../lib/style/ ${ theme } .less"; \n @import "../lib/style/components.less"; ` ,
) ;
// eslint-disable-next-line no-console
console . log ( ` Built a entry less file to dist/antd. ${ theme } .less ` ) ;
} else {
fs . writeFileSync (
path . join ( process . cwd ( ) , 'dist' , ` default-theme.js ` ) ,
` module.exports = ${ JSON . stringify ( vars , null , 2 ) } ; \n ` ,
@ -25,6 +25,7 @@ nohup.out
_site
_data
dist
report.html
/lib
/es
elasticsearch-*
@ -1,2 +1 @@
~*
dist/report.html
@ -97,7 +97,7 @@ Follow [Use in create-react-app](/docs/react/use-with-create-react-app).
Another approach to customize theme is creating a `less` file within variables to override `antd.less` .
```css
@import '~antd/es /style/themes/default.less';
@import '~antd/lib /style/themes/default.less';
@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
@import 'your-theme-file.less'; // variables to override above
```
@ -117,7 +117,7 @@ It's possible to configure webpack to load an alternate less file:
```ts
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
#antd { @import '~antd/es/style/core/index.less'; @import '~antd/es /style/themes/default.less'; }
#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib /style/themes/default.less'; }
```
Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.
@ -97,7 +97,7 @@ module.exports = {
另外一种方式是建立一个单独的 `less` 变量文件,引入这个文件覆盖 `antd.less` 里的变量。
```css
@import '~antd/es /style/themes/default.less';
@import '~antd/lib /style/themes/default.less';
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
```
@ -59,7 +59,9 @@ We provide Less and JavaScript usage for developers.
- **Less**
```less
@import '~antd/es/style/themes/default.less', .selector {
@import '~antd/lib/style/themes/default.less';
.selector {
color: @blue -5;
background-color: @gold -2;
}
@ -67,7 +67,9 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
- **Less**
```less
@import '~antd/es/style/themes/default.less', .selector {
@import '~antd/lib/style/themes/default.less';
.selector {
color: @blue -5;
background-color: @gold -2;
}
@ -74,6 +74,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
new BundleAnalyzerPlugin ( {
analyzerMode : 'static' ,
openAnalyzer : false ,
reportFilename : '../report.html' ,
} ) ,
) ;
}