mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
chore: 📦 Optimize npm package size (#23698)
* improve custom theme import path * reduce npm package size
This commit is contained in:
parent
f5153ab950
commit
c27a3a40a7
@ -61,15 +61,14 @@ function finalizeCompile() {
|
|||||||
|
|
||||||
function buildThemeFile(theme, vars) {
|
function buildThemeFile(theme, vars) {
|
||||||
// Build less entry file: dist/antd.${theme}.less
|
// Build less entry file: dist/antd.${theme}.less
|
||||||
fs.writeFileSync(
|
if (theme !== 'default') {
|
||||||
path.join(process.cwd(), 'dist', `antd.${theme}.less`),
|
fs.writeFileSync(
|
||||||
`@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
|
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
|
// eslint-disable-next-line no-console
|
||||||
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
console.log(`Built a entry less file to dist/antd.${theme}.less`);
|
||||||
|
} else {
|
||||||
if (theme === 'default') {
|
|
||||||
fs.writeFileSync(
|
fs.writeFileSync(
|
||||||
path.join(process.cwd(), 'dist', `default-theme.js`),
|
path.join(process.cwd(), 'dist', `default-theme.js`),
|
||||||
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
|
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
|
||||||
|
1
.gitignore
vendored
1
.gitignore
vendored
@ -25,6 +25,7 @@ nohup.out
|
|||||||
_site
|
_site
|
||||||
_data
|
_data
|
||||||
dist
|
dist
|
||||||
|
report.html
|
||||||
/lib
|
/lib
|
||||||
/es
|
/es
|
||||||
elasticsearch-*
|
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`.
|
Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
|
||||||
|
|
||||||
```css
|
```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 '~antd/dist/antd.less'; // Import Ant Design styles by less entry
|
||||||
@import 'your-theme-file.less'; // variables to override above
|
@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
|
```ts
|
||||||
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
|
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.
|
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` 里的变量。
|
另外一种方式是建立一个单独的 `less` 变量文件,引入这个文件覆盖 `antd.less` 里的变量。
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@import '~antd/es/style/themes/default.less';
|
@import '~antd/lib/style/themes/default.less';
|
||||||
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
|
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
|
||||||
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
|
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
|
||||||
```
|
```
|
||||||
|
@ -59,7 +59,9 @@ We provide Less and JavaScript usage for developers.
|
|||||||
- **Less**
|
- **Less**
|
||||||
|
|
||||||
```less
|
```less
|
||||||
@import '~antd/es/style/themes/default.less', .selector {
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
|
||||||
|
.selector {
|
||||||
color: @blue-5;
|
color: @blue-5;
|
||||||
background-color: @gold-2;
|
background-color: @gold-2;
|
||||||
}
|
}
|
||||||
|
@ -67,7 +67,9 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
|
|||||||
- **Less**
|
- **Less**
|
||||||
|
|
||||||
```less
|
```less
|
||||||
@import '~antd/es/style/themes/default.less', .selector {
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
|
||||||
|
.selector {
|
||||||
color: @blue-5;
|
color: @blue-5;
|
||||||
background-color: @gold-2;
|
background-color: @gold-2;
|
||||||
}
|
}
|
||||||
|
@ -74,6 +74,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
|
|||||||
new BundleAnalyzerPlugin({
|
new BundleAnalyzerPlugin({
|
||||||
analyzerMode: 'static',
|
analyzerMode: 'static',
|
||||||
openAnalyzer: false,
|
openAnalyzer: false,
|
||||||
|
reportFilename: '../report.html',
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user