-
Notifications
You must be signed in to change notification settings - Fork 27.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
example: antd-4 with built-in css support #11837
Conversation
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
buildDuration | 11.6s | 11.8s | |
nodeModulesSize | 61 MB | 61 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
main-HASH.js gzip | 6.25 kB | 6.25 kB | ✓ |
webpack-HASH.js gzip | 746 B | 746 B | ✓ |
de003c3a9d30..e3d8.js gzip | 10.2 kB | 10.2 kB | ✓ |
framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
Overall change | 56.3 kB | 56.3 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
main-HASH.module.js gzip | 4.78 kB | 4.78 kB | ✓ |
webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
de003c3a9d30..dule.js gzip | 6.78 kB | 6.78 kB | ✓ |
framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
Overall change | 51.5 kB | 51.5 kB | ✓ |
Legacy Client Bundles (polyfills)
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_app.js gzip | 1.24 kB | 1.24 kB | ✓ |
_error.js gzip | 3.15 kB | 3.15 kB | ✓ |
hooks.js gzip | 664 B | 664 B | ✓ |
index.js gzip | 222 B | 222 B | ✓ |
link.js gzip | 2.03 kB | 2.03 kB | ✓ |
routerDirect.js gzip | 279 B | 279 B | ✓ |
withRouter.js gzip | 278 B | 278 B | ✓ |
Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_app.module.js gzip | 594 B | 594 B | ✓ |
_error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
hooks.module.js gzip | 370 B | 370 B | ✓ |
index.module.js gzip | 212 B | 212 B | ✓ |
link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_buildManifest.js gzip | 61 B | 61 B | ✓ |
_buildManife..dule.js gzip | 61 B | 61 B | ✓ |
Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_error.js gzip | 233 kB | 233 kB | |
404.html gzip | 1.32 kB | 1.32 kB | ✓ |
hooks.html gzip | 956 B | 956 B | ✓ |
index.js gzip | 233 kB | 233 kB | -16 B |
link.js gzip | 243 kB | 243 kB | |
routerDirect.js gzip | 241 kB | 241 kB | |
withRouter.js gzip | 241 kB | 241 kB | |
Overall change | 1.19 MB | 1.19 MB |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
buildDuration | 12.1s | 12s | -106ms |
nodeModulesSize | 61 MB | 61 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
main-HASH.js gzip | 6.25 kB | 6.25 kB | ✓ |
webpack-HASH.js gzip | 746 B | 746 B | ✓ |
de003c3a9d30..e3d8.js gzip | 10.2 kB | 10.2 kB | ✓ |
framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
Overall change | 56.3 kB | 56.3 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
main-HASH.module.js gzip | 4.78 kB | 4.78 kB | ✓ |
webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
de003c3a9d30..dule.js gzip | 6.78 kB | 6.78 kB | ✓ |
framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
Overall change | 51.5 kB | 51.5 kB | ✓ |
Legacy Client Bundles (polyfills)
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_app.js gzip | 1.24 kB | 1.24 kB | ✓ |
_error.js gzip | 3.15 kB | 3.15 kB | ✓ |
hooks.js gzip | 664 B | 664 B | ✓ |
index.js gzip | 222 B | 222 B | ✓ |
link.js gzip | 2.03 kB | 2.03 kB | ✓ |
routerDirect.js gzip | 279 B | 279 B | ✓ |
withRouter.js gzip | 278 B | 278 B | ✓ |
Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_app.module.js gzip | 594 B | 594 B | ✓ |
_error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
hooks.module.js gzip | 370 B | 370 B | ✓ |
index.module.js gzip | 212 B | 212 B | ✓ |
link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_buildManifest.js gzip | 61 B | 61 B | ✓ |
_buildManife..dule.js gzip | 61 B | 61 B | ✓ |
Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_error.js gzip | 233 kB | 233 kB | -22 B |
404.html gzip | 1.32 kB | 1.32 kB | ✓ |
hooks.html gzip | 956 B | 956 B | ✓ |
index.js gzip | 233 kB | 233 kB | -104 B |
link.js gzip | 243 kB | 243 kB | -283 B |
routerDirect.js gzip | 241 kB | 241 kB | |
withRouter.js gzip | 241 kB | 241 kB | |
Overall change | 1.19 MB | 1.19 MB |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
buildDuration | 10s | 9.5s | -520ms |
nodeModulesSize | 61 MB | 61 MB | ✓ |
Client Bundles (main, webpack, commons)
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
main-HASH.js gzip | 6.25 kB | 6.25 kB | ✓ |
webpack-HASH.js gzip | 746 B | 746 B | ✓ |
de003c3a9d30..e3d8.js gzip | 10.2 kB | 10.2 kB | ✓ |
framework.HASH.js gzip | 39.1 kB | 39.1 kB | ✓ |
Overall change | 56.3 kB | 56.3 kB | ✓ |
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
main-HASH.module.js gzip | 4.78 kB | 4.78 kB | ✓ |
webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
de003c3a9d30..dule.js gzip | 6.78 kB | 6.78 kB | ✓ |
framework.HA..dule.js gzip | 39.1 kB | 39.1 kB | ✓ |
Overall change | 51.5 kB | 51.5 kB | ✓ |
Legacy Client Bundles (polyfills)
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 26.3 kB | 26.3 kB | ✓ |
Overall change | 26.3 kB | 26.3 kB | ✓ |
Client Pages
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_app.js gzip | 1.24 kB | 1.24 kB | ✓ |
_error.js gzip | 3.15 kB | 3.15 kB | ✓ |
hooks.js gzip | 664 B | 664 B | ✓ |
index.js gzip | 222 B | 222 B | ✓ |
link.js gzip | 2.03 kB | 2.03 kB | ✓ |
routerDirect.js gzip | 279 B | 279 B | ✓ |
withRouter.js gzip | 278 B | 278 B | ✓ |
Overall change | 7.86 kB | 7.86 kB | ✓ |
Client Pages Modern
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_app.module.js gzip | 594 B | 594 B | ✓ |
_error.module.js gzip | 2.08 kB | 2.08 kB | ✓ |
hooks.module.js gzip | 370 B | 370 B | ✓ |
index.module.js gzip | 212 B | 212 B | ✓ |
link.module.js gzip | 1.48 kB | 1.48 kB | ✓ |
routerDirect..dule.js gzip | 271 B | 271 B | ✓ |
withRouter.m..dule.js gzip | 270 B | 270 B | ✓ |
Overall change | 5.28 kB | 5.28 kB | ✓ |
Client Build Manifests
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_buildManifest.js gzip | 61 B | 61 B | ✓ |
_buildManife..dule.js gzip | 61 B | 61 B | ✓ |
Overall change | 122 B | 122 B | ✓ |
Serverless bundles Overall increase ⚠️
zeit/next.js canary | mit123suki/next.js ant-example | Change | |
---|---|---|---|
_error.js gzip | 233 kB | 233 kB | |
404.html gzip | 1.32 kB | 1.32 kB | ✓ |
hooks.html gzip | 956 B | 956 B | ✓ |
index.js gzip | 233 kB | 233 kB | |
link.js gzip | 243 kB | 243 kB | |
routerDirect.js gzip | 241 kB | 241 kB | |
withRouter.js gzip | 241 kB | 241 kB | -8 B |
Overall change | 1.19 MB | 1.19 MB |
@Timer @lfades prettier modifies the main repo readme file by adding a new line at the end and lint passes it after the modification and the same change in readme seeming to fail my build here. |
d0a0104
to
7707f4a
Compare
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
@mit123suki Any ideas how to add css modules to this setup? |
|
Hello, I am using Next.js 9.3 with the built-in SASS feature and was able to import antd css using the above example. Thanks for sharing the webpack config. I wanted to import the ant less file in order to override the theme settings. Any way we can configure the webpack such that, the less variables of ant can be overriden and we still use the built-in sass for our application code? The moment we use next-css, it disables built-in SASS for backward compatibility I guess. I tried the following solution, but it disables built-in-sass. https://annacoding.com/article/2cU5baQMXG8SV2pbxh7kO8/How-to-config-Ant-Design--in-Next.js-with-custom-theme Thanks. |
Hi, using any of next style plugins disables support for built-in css and sass. For variables you can create css properties(down side is there is no browser support for ie11 and this can be worked out using sass). Please check my github repo, I've added 2 repos for css and less and displayed the use of variables and modules. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
Hey @mit123suki, I'm not convinced this PR is actually taking advantage of CSS Modules for Ant Design. I noticed that, for your example, if I remove the entire babel plugin for importing antd, the code works the exact same. I believe this is because this css import line in _app.js is actually loading the entire antd css into the project.
According to the Ant Design docs, when using "Modularized Ant", you should only need to configure the Furthermore, if I remove the css import line in _app.js, I get the following error:
Side note, I believe this line here, should be:
Am I missing something here? |
comprehensive example showing antd-4 integration with next-9.3+ built-in css support.
resolves #9830