mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +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) {
|
||||
// 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`,
|
||||
|
1
.gitignore
vendored
1
.gitignore
vendored
@ -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',
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user