Update Ant Design Examples for New CSS Support (9.2) #9830
Comments
|
Maybe not support css from node_modules, I guess. |
if you don't use [RFC] css support , you can support css from node_modules with-css plugin. |
|
Linking to #8626 |
|
I’d be also interested in seeing this. Our teams use antd with next-css/next-less and some hacks on top from the Next.js examples folder. That setup is quite clumsy and fragile. I’m looking forward to switching to the build-in css support, but have no clue how to deal with less in this case. antd is a pretty popular ui framework, so I guess quite a lot of devs will benefit from a new example. |
|
Has anyone got ant-design working with Next 9.2 yet? (without @zeit/next-css) |
timneutkens
added
good first issue
Timer
changed the title
|
@stephankaag, I have used withLess to use antd v4.0.0.rc1, it works! |
|
I'm still seeing issues with antd 4.0. Configuration is similar to [https://levelup.gitconnected.com/lets-create-a-project-with-nextjs-antd-and-deploy-with-now-sh-e38772348312|this guide] |
Of course, because that combination always worked. I am trying to make things work WITHOUT @zeit/next-css or @zeit/next-less. |
|
Anyone has successfully integrated next 9.2 with ant design? (without next-css plugin) |
|
@stephankaag The combination works very well (I'm using withCss combined with withLess and custom less variables), but how is your bundle size? |
@chemicalkosek did you manage to resolve this? I've been running into the exact same issue on Nextjs 9.2.1 |
|
Anyone manage to resolve this issue? |
|
Any updates to this issue? |
|
My solution: |
|
@i-tengfei Wow, it's working! Thank you very much! |
|
@i-tengfei are you using the same configuration as the example? If not, mind posting your next.config & babelrc? |
|
Btw I'm not using the new CSS support. What's working is next with antd4 tree shaked (tree shaking never worked with antd in the official example, because of the lack of |
|
@sebas-deedee There isn't any way forward until next supports loading CSS from Option 1.) Use a custom babel and next configuration to load CSS from in your import "antd/(lib|es)/radio/style/css.js" // antd component css
import "antd/(lib|es)/table/style/css.js" // antd component css
...etc
import "../styles/globals.css" // global css
import "../styles/overrides.css" // overrides cssand in a page or component file import { Radio, Table } from "antd" // this will pick from "ant/lib" or "ant/es"The result is that the style imports are consistently loaded in order by their import position and your production build is smaller because you're cherry-picking the components and CSS. or Option 2.) Copy/paste the entire in your import "../styles/globals.css" // antd.min.css (global) css
import "../styles/overrides.css" // overrides cssand in a page or component file import { Table } from "antd"The result is that the style imports are consistently loaded in order by their import position, but the production build is larger because of the unutilized CSS. Neither option is particularly developer-friendly/zero-config, as such, I'd hesitate to pull this into the official That said, here's a working example of both options above utilizing |
|
In my opinion, one of the best way to use If you need |
|
@pahaz Your example fails to build for production. |
|
@mattcarlotta could you please explain your setup. |
|
@pahaz Apologies, it was an user error. While this approach works, unfortunately, it's not very flexible for pre-existing projects using Sass. That said, encouraging developers to adopt On that note, there is the official with-ant-design-less example that accomplishes a similar result to your example. Perhaps you may want to submit an example to Vercel that utilizes the |
|
If anyone from Vercel interested in the example I'll create a PR. |
Please, I want. |
If you use less for everything it modifies the global styles for same class names, so to avoid that you can enable css modules and write css files. I've prepared the repo for less here, https://github.com/mit123suki/next-ant-less.git |
|
For anyone who's still interested, checkout the following repos Next with Ant-LESS Next with Ant-CSS |
|
@mit123suki Coul you please explain, what the difference between your example and official examples? https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less -- less |
Overall it leads to reduction in app bundle size and styles are loaded correctly. You can do yarn analyze and compare the results. |
|
@mit123suki Does this line import all styles? Tree shaking using esm only for javascripts? |
|
Can't build from your less repo. It gaves me the following error: |
|
@2huBrulee i forgot add to esm to start script. Pull the latest code. That should fix the error, if not file an issue. Thanks |
From your 'less' repo, i did: And got that error |
|
@mit123suki Hey, this works perfectly at localhost, thanks! But when I try to deploy it to Vercent i get the following error message:
Edit: |
|
@RiatIO please open an issue at my repo. Btw I updated the repos recently. So pull the latest code if you haven't already and see if the issue still occurs. Thanks. For anyone who is having problems with the repos, please file an issue there, not here please. Keep this thread clean, Thanks. |
this works!! |
|
@mcyleung mind sharing your config? |
|
@xedef which problem? |
|
I've tried the https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less as a boilerplate and pushed it to Heroku. I got some pretty low Lighthouse scores and two of the recommended solutions were pretty much leading to the CSS. Recommended solutions:
Could anyone help me out? |
|
@raindecastro Ant-design works by importing all necessary CSS when importing the component. Therefore, if you pass in an option that alters its appearance -- like adding the mode="multiple" option to The larger problem is that ant-design isn't a small library (48.3 MB unpacked and about 1.5MB+ packed) and with it are a lot of dependencies. Therefore, lower lighthouse scores are kind of expected when using it. This is one of the main reasons why I've slowly migrated away from ant-design to either directly using their react component (rc) dependencies or more recently designing my own UI components. Take a look at these chunk graphs of However... there are two things you can do to reduce the bundle size: 1.) Remove 2.) Only export icons from icons/index.js (if you import other components that require icons, then they'll need to be manually added to this file) next.config.js /* eslint-disable */
const { IgnorePlugin } = require("webpack");
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function" ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: "null-loader",
});
} else {
/* aliases ant icon imports to user-defined icons folder */
config.resolve.alias = {
...config.resolve.alias,
"@ant-design/icons/lib/dist$": path.resolve(`./icons/index.js`),
};
/* strips out moment locales */
config.plugins.push(new IgnorePlugin(/^\.\/locale$/, /moment$/));
}
return config;
},
});Take a look at these chunk graphs: |
|
@mattcarlotta First of all, thank you! That was one of the most in-depth answers i've ever gotten from issues like this! With that being said, even though antd is one of my favourite component libraries, optimizations out of the box seem to be a pretty big downside. I'll first try out two of your recos to reduce bundle size then check out the performance scores from there hoping it would budge a little. Though if it still feels pretty slow, I guess it's time to look for another option. Do you mind if I send you an email? There's something I want to verify and I don't want to overuse this thread. |
|
i just use rsuite now |
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
and others
import ant-design library throw error
can you provide an example import ant-design use [RFC] css support? thanks.
when i use [RFC] css support and import ant-design library, it throw error :
here is my next-config.js
The text was updated successfully, but these errors were encountered: