Peut-être ne supporte-t-il pas les CSS à partir de node_modules, je suppose.

Peut-être ne supporte-t-il pas les CSS à partir de node_modules, je suppose.

si vous n'utilisez pas le support [RFC] css , vous pouvez prendre en charge le css à partir du plugin node_modules with-css.

Lien vers #8626

Je serais aussi intéressé de voir ça. Nos équipes utilisent antd avec next-css/next-less et quelques hacks en haut du dossier d'exemples Next.js. Cette configuration est assez maladroite et fragile. J'ai hâte de passer à la prise en charge CSS intégrée, mais je ne sais pas comment gérer moins dans ce cas.

antd est un framework d'interface utilisateur assez populaire, donc je suppose que beaucoup de développeurs bénéficieront d'un nouvel exemple.

Est-ce que quelqu'un a déjà fait fonctionner ant-design avec Next 9.2 ? (sans @zeit/next-css)

@stephankaag , j'ai utilisé withLess pour utiliser antd v4.0.0.rc1, ça marche !

Je vois toujours des problèmes avec antd 4.0.

La configuration est similaire à [ https://levelup.gitconnected.com/lets-create-a-project-with-nextjs-antd-and-deploy-with-now-sh-e38772348312 |ce guide]

@stephankaag , j'ai utilisé withLess pour utiliser antd v4.0.0.rc1, ça marche !

Bien sûr, parce que cette combinaison a toujours fonctionné. J'essaie de faire fonctionner les choses SANS @zeit/next-css ou @zeit/next-less.

Quelqu'un a-t-il intégré avec succès la prochaine version 9.2 avec la conception des fourmis ? (sans plugin next-css)

@stephankaag La combinaison fonctionne très bien (j'utilise withCss combiné avec withLess et custom less variables), mais quelle est la taille de votre bundle ?
J'ai migré vers antd4. On dirait que le tremblement de l'arbre ne fonctionne pas comme prévu à partir de la v4. J'ai une taille de paquet de plus de 1,3 Mo, où la plupart sont des icônes antd.
Selon ce https://github.com/ant-design/babel-plugin-import/issues/402 le "libraryDirectory": "es" est nécessaire (l'exemple officiel avec-ant-less ne l'a pas).
Mais l'ajout de ceci me donne l'erreur suivante:

[ error ] /home/maciek/Dokumenty/websites/bookingapp/frontend/node_modules/antd/es/notification/index.js:3
import * as React from 'react';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.antd/es/notification (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10975:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../lib/withData.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:8200:78)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10614:71)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10754:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at /home/maciek/Dokument

@stephankaag La combinaison fonctionne très bien (j'utilise withCss combiné avec withLess et custom less variables), mais quelle est la taille de votre bundle ?
J'ai migré vers antd4. On dirait que le tremblement de l'arbre ne fonctionne pas comme prévu à partir de la v4. J'ai une taille de paquet de plus de 1,3 Mo, où la plupart sont des icônes antd.
Selon cet ant-design/babel-plugin-import#402 le "libraryDirectory": "es" est nécessaire (l'exemple officiel avec-ant-less ne l'a pas).
Mais l'ajout de ceci me donne l'erreur suivante:

[ error ] /home/maciek/Dokumenty/websites/bookingapp/frontend/node_modules/antd/es/notification/index.js:3
import * as React from 'react';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.antd/es/notification (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10975:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../lib/withData.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:8200:78)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10614:71)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10754:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at /home/maciek/Dokument

@chemicalkosek avez-vous réussi à résoudre ce problème ? J'ai rencontré exactement le même problème sur Nextjs 9.2.1

Quelqu'un parvient à résoudre ce problème ?

Des mises à jour sur ce problème ?

Ma solution :

yarn add esm

"scripts": {
    "dev": "NODE_OPTIONS=\"-r esm\" next",
    "build": "NODE_OPTIONS=\"-r esm\" next build",
    "start": "NODE_OPTIONS=\"-r esm\" next start"
}

@i-tengfei Wow, ça marche ! Merci beaucoup!

@i-tengfei utilisez-vous la même configuration que l'exemple ?

Sinon, cela vous dérange de publier votre next.config et babelrc ?

Au fait, je n'utilise pas le nouveau support CSS. Ce qui fonctionne, c'est ensuite avec antd4 tree secoué (tree shake n'a jamais fonctionné avec antd dans l'exemple officiel, à cause du manque de "libraryDirectory":"es" ). La taille du paquet a été coupée d'environ 700 à 800 Ko, je crois. J'utilise toujours withCss et withLess tho.

@chemicalkosek voyez -vous toujours:

chunk styles [mini-css-extract-plugin]
Conflicting order between

avec ta configuration ?

Oui, je le fais, mais ce n'est qu'un avertissement et tout fonctionne très bien.
J'ai déjà fait des recherches sur ce problème et je pense que c'est parce que vous avez dans un seul composant :

import { Button, Input } from 'antd'

et dans un autre composant :

import { Input, Button } from 'antd'

Soi-disant c'est ce qui crée ce problème, mais je n'en suis pas vraiment sûr
Vous pouvez masquer ces avertissements, mais je n'ai pas essayé. J'essaierai demain cependant, ceux-ci peuvent être assez ennuyeux.
Source 1 : https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings
Source 2 : https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
Je suis très heureux que l'arbre tremble maintenant :) Et avec antd4, les icônes ne sont plus incluses comme elles l'étaient avec antd3, où les icônes faisaient la moitié de la taille d'antd3. Vous pouvez désormais importer des icônes de manière sélective.

Malheureusement, mon expérience est que ce n'est pas seulement un avertissement que vous pouvez simplement ignorer. J'ai vu des problèmes avec des composants qui ne sont pas stylisés car j'ai ajouté plus de composants antd à la page. Cela arrive de manière très incohérente. Organiser les importations de manière cohérente ne le fait pas disparaître non plus

Tu veux dire en développement ? Oui, je constate parfois dans le développement que les composants ne sont pas stylisés. Pas très souvent. Fonctionne après avoir actualisé la page. Avez-vous le même problème en production ? En production après next build tout fonctionne bien pour moi. Même si j'ai les mêmes messages d'ordre conflictuel dans les journaux de construction.

@chemicalkosek J'ai l'impression de l'avoir vu en production, mais je ne suis pas sûr à 100%...

J'espère que tu as raison

FWIW, cela nous arrive également par intermittence dans les versions de production.

_supprimé_

@ssteiger nous parlons de ne pas utiliser le plugin @zeit/next-css.

Ups désolé. Mauvais fil.

quelqu'un a-t-il un design de fourmi fonctionnel 4 (moins) + nextjs 9.2 + éviter les conflits d'ordre?

J'aimerais également voir un exemple avec @ant-design/pro-layout. Quelqu'un voit-il travailler repo?

Fourmi. design@4 fonctionnant avec [email protected] sans next.config.js.

Mon code dans pages/_app.js est :

import "../node_modules/antd/dist/antd.css";
export default ({ Component, pageProps }) => <Component {...pageProps} />;

package.json est :

"dependencies": {
    "antd": "^4.0.2",
    "next": "^9.3.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  }

@ImAbdullahJan Oui, cela fonctionne mais avec le chargement du paquet css complet. Est-il possible d'utiliser babel-plugin-import sans @zeit/withCss ?

une idée de comment puis-je gérer moins (fourmi) avec le nouveau support intégré pour css et sass?

awww je n'aurais pas dû mettre à jour. a cassé mon application au-dessus de mon niveau de rémunération

awww je n'aurais pas dû mettre à jour. a cassé mon application au-dessus de mon niveau de rémunération

pareil ici

@OliverRudoll @coderdix qu'est-ce qui s'est cassé ? La prise en charge CSS/Sass intégrée est désactivée lorsque vous utilisez @zeit/next-css, la mise à jour doit donc être ininterrompue.

@OliverRudoll @coderdix qu'est-ce qui s'est cassé ? La prise en charge CSS/Sass intégrée est désactivée lorsque vous utilisez @zeit/next-css, la mise à jour doit donc être ininterrompue.

Merci d'avoir demandé à Tim. Avis de non-responsabilité : c'est ma première année avec la prochaine et je ne suis pas complètement dans les concepts.

Ce que je peux vous dire, c'est que la configuration suivante fonctionne avec la "très" ancienne version (prochaine 9.0.4). Lorsque je mets à jour vers 9.2.2 ou 9.3 et que j'arrête d'utiliser les plug-ins externes Sass/Css dans la configuration, je rencontre un problème avec la configuration Babel.

Je suis revenu à l'ancienne version pour l'instant en raison du manque de temps - je vais essayer de réessayer la mise à jour et décrire mon problème en détail dès que possible.

next.config.js

const withTm = require('next-transpile-modules')([
  'core',
  'additional',
  'shared',
]);
module.exports = withTm(
  withFonts(
    withImages(
      withVideos(
        withSass({
          ...withCss({
            typescript: {
              ignoreDevErrors: true
            },
            publicRuntimeConfig: {
              API_ROOT: "http://localhost:8000/api/",
              env: process.env.NODE_ENV
            },
            webpack: (config, { isServer }) => {
              if (isServer) {
                const antStyles = /antd\/.*?\/style\/css.*?/;
                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",
                });
              }
              config.devtool = "eval-source-map";
              return config;
            },
            distDir: "../../dist/functions/next",
          }),
          cssModules: true,
        })
      )
    )
  )
);

babel.config.js

module.exports = function(api) {
  api.cache(true);
  const presets = ["next/babel"];
  const plugins = [
    ['styled-components'],
    ['import', { libraryName: "and", style: "css" }],
  ];
  return {
    presets,
    plugins,
  };
};

@chemicalkosek @ChuckJonas quelle est votre taille de construction pour une forme typique ou pour l'exemple de conception with-ant-design donné? Pouvez-vous purger ant css avec succès?

@ mit123suki Dans mon cas, je suis plus préoccupé par les styles cassés que par la taille de la page, donc ma solution consistait simplement à inclure la feuille de style entière dans _app.ts

//due to chunk styles [mini-css-extract-plugin] -> Conflicting order between ... error
// once resolved, delete this file and uncomment code in .babelrc to use antd plugin
import 'antd/dist/antd.less';
export default ({ Component, pageProps }) => <Component {...pageProps} />;

Avec cela, mon mandrin CSS semble être d'environ ~ 62 Ko gzippé. Je compte à peu près sur 99% des styles antd pour mon application.

@mit123suki L' exécution de build-analyze sans esm génère actuellement une erreur pour moi (même lorsque je commente libraryDirectory ), mais la taille de build est de 880 Ko et avec esm et libraryDirectory: es c'est 720kb gzippé (pas une petite application). Mais étrangement maintenant, même sans esm, je ne vois pas l'ensemble du package d'icônes antd inclus qui, je pense, représentait des centaines de ko. Peut-être parce que c'est une erreur, je ne le vois pas dans le paquet et les chiffres ne sont plus exacts.

Mais définitivement sans esm et "libraryDirectory": "es" je peux voir l'ensemble du package antd inclus (étrangement - sans icônes pour le moment). Avec esm c'est l'arbre secoué.

Sans "libraryDirectory": "es" (le plus gros morceau avec antd) :

Avec "libraryDirectory": "es" (antd est maintenant un arbre secoué qui ne s'affiche pas comme le plus gros morceau)

@mit123suki Merci ! Suite à votre configuration dans https://github.com/zeit/next.js/pull/11837, cela fonctionne sur next.js 9.3.4

@mit123suki La transpilation/compilation de esm semble être une approche un peu lourde et peut ne pas produire de morceaux qui fonctionnent pour les navigateurs plus anciens.

Cela dit, j'ai pu réduire la taille du paquet de :

à:

en utilisant le dossier antd/lib ...

babel.config.js (sans une prochaine configuration personnalisée , style: css doit être supprimé et à la place, vous devez importer manuellement l'intégralité de la bibliothèque : import "antd/dist/antd.min.css"; dans un fichier de page personnalisé _app.js )

module.exports = api => {
  api.cache(true);
  return {
    presets: ["next/babel"],
    plugins: [
      ["import", { libraryName: "antd",  libraryDirectory: "lib", style: "css" }],
      ["import", { libraryName: "@ant-design/icons", libraryDirectory: "lib/icons", camel2DashComponentName: false }, "@ant-design/icons"],
    ],
  };
};

La configuration ci-dessus ne nécessite pas esm transpilation/compilation de Cependant, la es dossier est encore requis par webpack dans la construction de la production malgré qu'il ne sont pas utilisées / nécessaires à tous et même quand il a été aliasé à un fichier vide (voir post ci - dessous pour savoir pourquoi cela peut arriver).

Après des heures et des heures de débogage, la cause première de l'ensemble es importation du package babel-import-plugin avec le package ant/lib OU d'utiliser le next/dynamic paquet incorrectement.

Si vous utilisez babel.config.js que j'ai montré ci-dessus et que vous n'utilisez pas dynamic , alors votre build de production ne devrait pas inclure le dossier antd/es ni avoir besoin de compiler/ transpiler les paquets esm fourmis.

Cependant, il semble que certaines importations de fourmis (comme Table ) cassent le tremblement icons arbre @ant-icons bibliothèque babel-plugin-import . Pour atténuer ce problème, vous devrez exporter manuellement les icônes dont vous avez besoin à partir d'un fichier défini par l'utilisateur , puis alias le package @ant-icons vers ce fichier dans la configuration du pack web next.config.js (REMARQUE : Malheureusement, si vous devez utiliser des icônes supplémentaires de la bibliothèque @ant-icons ou utiliser des composants antd supplémentaires, vous devrez exporter toutes les icônes requises). L'exemple de travail ci-dessous comprend comment accomplir cela ...

Exemple de travail :

1. Exemple de dépôt de clone : git clone [email protected]:mattcarlotta/antd-example.git
2. Installer les dépendances : yarn
3. Exécutez yarn outputs pour parcourir les différentes branches : master , dynamic , et unoptimized pour créer des fichiers de production et afficher les graphiques de blocs résultants.

Résultats

Importation directe des icônes Table et aliasing (branche master) :

import { Table } from "antd";

Résultats dans ce graphique (parsé : 797,19 Ko)

Utilisation de dynamic pour importer les icônes ant/lib/table et aliasing (branche dynamique) :

import dynamic from "next/dynamic";
import "antd/lib/table/style/css.js"; // required, otherwise, no styles will be applied

const Table = dynamic(() => import("antd/lib/table"), { ssr: false });

Résultats dans ce graphique (parsé : 805,73 Ko) :

Utilisation dynamique sur l'ensemble du package et non aliasing des icônes (branche non optimisée) :

import dynamic from "next/dynamic";
import "antd/lib/table/style/css.js" // required, otherwise, no styles will be applied

const Table = dynamic(() => import("antd").then(mod => mod.Table), { ssr: false });

Résultats dans ce graphique (parsé : 2,32 Mo) :

Voir le post ci-dessous pour les résultats esm .

Super travail @mattcarlotta
Ouais, transpiler avec esm est une surcharge et je veux l'éviter aussi, mais l'arborescence semble échouer sans es libdirectory et cela nécessite esm. Provoquant également une erreur sans cela. Le système de conception Antd est complexe en chargeant tous les styles de manière récursive, disons par exemple, créez simplement un composant Button et utilisez moins de plugin et vous pouvez voir tous les styles chargés. Heureusement, babel-plugin-import permet d'éviter cela dans une certaine mesure en important explicitement les composants requis et son style à l'aide de babel config. Si vous utilisez css, vous devez également inclure l'intégralité du fichier css dans _app, sinon il se casse car tous les composants en dépendent. Purger les css à ce stade résout également tant de problèmes hehe.
La taille de ma configuration de configuration me semble assez décente, mais encore une fois, comme vous l'avez dit, la surcharge de transipilation esm est le problème.

Votre dernier exemple utilisant l'import du composant css.js semble intéressant. Je vais vérifier le repo :)

@mit123suki À l'aide du babel-plugin-import et d'une prochaine configuration webpack personnalisée , le tremblement de l'arbre (ou du moins ne nécessitant que ce qui est nécessaire pour que le composant fonctionne correctement) fonctionnera avec le dossier antd/lib , donc , l'utilisation du dossier antd/es (esm) n'est peut-être pas nécessaire.

Par curiosité, que produit le esm build quand seul un Button est importé ?

Par exemple, en important uniquement le composant Button :

Comme indiqué ici, il importe uniquement ce qui est requis dans le fichier antd/lib/button.js :

Hmm... Je suis sur le point d'utiliser une approche musclée pour un seul paquet. Cela dit, les résultats de l'utilisation du package esm , illustrés ci-dessous, parlent d'eux-mêmes. Cependant, il y a un compromis : compatibilité du navigateur et temps de transpile/compilation.

Taille analysée : 692,73 Ko ( réduction d' environ 100 Ko ant/lib branche principale ant/lib )

A partir d'un projet personnel de taille moyenne, voici quelques autres résultats :

| Tentatives de compilation |

1st Build - Compilé avec succès en 39472ms (total 51.09s)
2nd Build - Compilé avec succès en 34971ms (total 49,71s)
3ème Build - Compilé avec succès en 34368ms (total 49,34s)
4ème Build - Compilé avec succès en 34867ms (total 49,40s)
5ème Build - Compilé avec succès en 34071ms (total 49,58s)

| Graphique des résultats - Compilé avec succès en 34863ms (total 56,36s) |

Serveur:
Statistique : Tous (8,07 Mo)
Analyse : Tous (11,28 Mo)
Gzip : Tous (2,14 Mo)
-
Client:
Statistique : Tous (7,74 Mo)
Analyse : Tous (2,8 Mo)
Gzip : Tous (789,13 Ko)
-
Nombre de morceaux de fourmis : 96 (taille totale : 282,74 Ko)

| Tentatives de compilation |

1st Build - Compilé avec succès en 36334ms (total 43,72s)
2nd Build - Compilé avec succès en 34878ms (total 42,51s)
3ème Build - Compilé avec succès en 31138ms (total 42.10s)
4ème Build - Compilé avec succès en 31732ms (total 41.41s)
5ème Build - Compilé avec succès en 35435ms (total 43,92s)

| Graphique des résultats - Compilé avec succès en 36166ms (total 57.03s) |

Serveur:
Statistique : Tous (8,07 Mo)
Analyse : Tous (11,28 Mo)
Gzip : Tous (2,14 Mo)
-
Client:
Statistique : Tous (8,01 Mo)
Analyse : Tous (2,94 Mo)
Gzip : Tous (820,81 Ko)
-
Nombre de morceaux de fourmis : 204 (taille totale : 1,05 Mo)

Dans mon projet actuel, la compilation génère une erreur sans esm et libraryDirectory: es sur ceci :

> Build error occurred
/home/....../frontend/node_modules/antd/es/date-picker/generatePicker.js:36
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)

J'utilise ce nouvel ajout à antd4 pour remplacer moment.js par day.js :
https://ant.design/docs/react/replace-moment

C'est juste une information rapide, je n'ai pas enquêté plus loin, je suis revenu à esm pour l'instant car il s'agit d'une application en production

@chemicalkosek Le problème réside dans la configuration de babel et s'affiche dans l'erreur :

.../....../.../.../ antd/es/ .../....js

Votre configuration babel cible esm ( "libraryDirectory": "es" ). Si vous voulez utiliser cjs (ou est-ce umd , n'avez pas vraiment regardé de trop près) alors utilisez le babel-plugin-import pour cibler lib ( "libraryDirectory": "lib" ).

Voir ci-dessus pour la configuration de babel .

Des mises à jour sur ce problème ?

@sebas-deedee Il n'y a aucun moyen d'avancer jusqu'à ce que le prochain supporte le chargement de CSS à partir de node_modules
et cela ne sera probablement pas pris en charge car cela peut actuellement entraîner des importations CSS non ordonnées - par exemple, charger d'abord un fichier overrides.css , puis un node_module/antd/component/style.css ensuite - ce qui entraîne une interface utilisateur incohérente /UX. D'ici là, vous avez deux options :

Option 1. ) Utilisez un babel personnalisé et la configuration suivante pour charger CSS à partir de node_modules/antd/lib ou à partir node_modules/antd/es dossiers ne gérera pas les importations CSS ; par conséquent, le CSS doit être importé dans le fichier _app.js . Par exemple:

dans votre fichier _app.js :

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 css

et dans une page ou un fichier de composant

import { Radio, Table } from "antd" // this will pick from "ant/lib" or "ant/es"

Le résultat est que les importations de style sont systématiquement chargées dans l'ordre de leur position d'importation et que votre version de production est plus petite car vous choisissez les composants et le CSS.

ou

Option 2. ) Copiez/collez l'intégralité du ant.min.css du node_modules/dist/ant.min.css dans un fichier global.css . Importez ensuite ce fichier dans un fichier _app.js . L'avantage est que vous n'avez pas besoin d'une prochaine configuration personnalisée pour importer à partir de node_modules ; Cependant, vous aurez toujours besoin d'importer l'intégralité de la bibliothèque CSS ant-design. Par conséquent, l'inconvénient est que votre version de production aura un fichier CSS assez volumineux qui ne sera utilisé que par les composants que vous avez importés - le reste ne sera que du CSS de poids mort.

dans votre fichier _app.js :

import "../styles/globals.css" // antd.min.css (global) css
import "../styles/overrides.css" // overrides css

et dans une page ou un fichier de composant

import { Table } from "antd"

Le résultat est que les importations de style sont systématiquement chargées dans l'ordre de leur position d'importation, mais la version de production est plus grande en raison du CSS inutilisé.

Aucune des deux options n'est particulièrement conviviale pour les développeurs/zéro-config, en tant que telle, j'hésiterais à intégrer cela dans l'exemple officiel with-ant-design .

Cela dit, voici un exemple fonctionnel des deux options ci-dessus utilisant next: ^9.3.5 avec antd: ^4.1.4 :
1.) Clonez l'exemple : [email protected]:mattcarlotta/next-antd-v4.git
2.) Installer les dépendances : yarn
3.) Exécutez la première option en exécutant : yarn dev
4.) Une fois terminé, terminez le processus et tapez : git checkout globals
5.) Exécutez la deuxième option en exécutant : yarn dev

À mon avis, l'une des meilleures façons d'utiliser antd avec @ant-design/pro-layout est simplement de renommer tous vos fichiers .css en .less . LESS est rétrocompatible avec CSS. De cette façon, vous n'avez pas besoin de pirater votre configuration babel. C'est un moyen facile et moins piratable.

Si vous avez besoin de NextJS + antd + @ant-design/pro-layout exemple, vous pouvez vérifier ceci : https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/ tree/master/apps/_example04antpro (mais, vous devriez utiliser l'extension .less pour vos fichiers .css )

@pahaz Votre exemple ne parvient pas à être

@mattcarlotta pourriez-vous s'il vous plaît expliquer votre configuration.
J'ai ajouté une action CI pour tester le build. Test CI pour le nœud v10 et le nœud v12
https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/runs/615670863

@pahaz Excuses, c'était une erreur de l'utilisateur. Bien que cette approche fonctionne, malheureusement, elle n'est pas très flexible pour les projets préexistants utilisant Sass. Cela dit, encourager les développeurs à adopter less sur les importations de css n'est qu'une autre solution de contournement au problème d'origine : ne pas pouvoir importer CSS à partir de node_modules.

Sur cette note, il y a l'exemple officiel with-ant-design-less qui obtient un résultat similaire à votre exemple.

Peut-être que vous voudrez peut-être soumettre un exemple à Vercel qui utilise le package @ant-design/pro-layout .

Si quelqu'un de Vercel est intéressé par l'exemple, je créerai un PR.

Si quelqu'un de Vercel est intéressé par l'exemple, je créerai un PR.

S'il vous plaît, je veux.

À mon avis, l'une des meilleures façons d'utiliser antd avec @ant-design/pro-layout est simplement de renommer tous vos fichiers .css en .less . LESS est rétrocompatible avec CSS. De cette façon, vous n'avez pas besoin de pirater votre configuration babel. C'est un moyen facile et moins piratable.

Si vous avez besoin de NextJS + antd + @ant-design/pro-layout exemple, vous pouvez vérifier ceci : https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/ tree/master/apps/_example04antpro (mais, vous devriez utiliser l'extension .less pour vos fichiers .css )

Si vous en utilisez moins pour tout, cela modifie les styles globaux pour les mêmes noms de classe, afin d'éviter cela, vous pouvez activer les modules css et écrire des fichiers css.

J'ai préparé le repo pour moins ici, https://github.com/mit123suki/next-ant-less.git

Pour tous ceux qui sont toujours intéressés, consultez les dépôts suivants

Suivant avec Ant-LESS
https://github.com/mit123suki/next-ant-less

Suivant avec Ant-CSS
https://github.com/mit123suki/next-ant-css

@mit123suki Pouvez-vous expliquer, s'il vous plaît, quelle est la différence entre votre exemple et les exemples officiels ?

https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less -- moins
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design -- css

@mit123suki Pouvez-vous expliquer, s'il vous plaît, quelle est la différence entre votre exemple et les exemples officiels ?

https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less -- moins
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design -- css

• Arbre secouant en utilisant esm,
• importations granulaires à l'aide de babel-plugin-import
• Remplacement des paramètres régionaux Ant, lors de l'utilisation de Date-Picker à l'aide du plugin dayjs réduisant le bundle antd plus loin
• Modules locaux activés avec fichier cssvars.css surchargé afin que les variables soient directement disponibles dans les modules css.

Dans l'ensemble, cela entraîne une réduction de la taille de l'ensemble d'applications et les styles sont chargés correctement. Vous pouvez analyser le fil et comparer les résultats.

@mit123suki Cette ligne importe-t-elle tous les styles ? Arbre secouant en utilisant esm uniquement pour les javascripts?

@mit123suki Cette ligne importe-t-elle tous les styles ? Arbre secouant en utilisant esm uniquement pour les javascripts?

vous pouvez supprimer cette ligne et changer le style babelrc import etd en true. Cela fonctionne de la même manière, sauf que nous avons maintenant un ordre de conflit entre les styles de composants

oui uniquement pour les fichiers javascript, vous pouvez opter pour purgecss mais c'est casser les styles

@mit123suki Pouvez-vous expliquer, s'il vous plaît, quelle est la différence entre votre exemple et les exemples officiels ?
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less -- moins
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design -- css

• Arbre secouant en utilisant esm,
• importations granulaires à l'aide de babel-plugin-import
• Remplacement des paramètres régionaux Ant, lors de l'utilisation de Date-Picker à l'aide du plugin dayjs réduisant le bundle antd plus loin
• Modules locaux activés avec fichier cssvars.css surchargé afin que les variables soient directement disponibles dans les modules css.

Dans l'ensemble, cela entraîne une réduction de la taille de l'ensemble d'applications et les styles sont chargés correctement. Vous pouvez analyser le fil et comparer les résultats.

Impossible de construire à partir de votre moins repo. Cela m'a donné l'erreur suivante:
10:16:18.845 import { Row } from '../grid'; 10:16:18.845 ^^^^^^ 10:16:18.845 SyntaxError: Cannot use import statement outside a module

@2huBrulee j'ai oublié d'ajouter à esm pour démarrer le script. Tirez le dernier code. Cela devrait corriger l'erreur, sinon signaler un problème. Merci

@2huBrulee de quel repo s'agit-il ? " importer { ligne } de '../grid';" -Qu'est-ce que c'est? Est-ce une bibliothèque antd ? Si c'est le cas, il doit s'agir de l'import { Row } de 'antd'. Vérifiez mon github pour mes repos.

À partir de votre dépôt « moins », j'ai fait :
fil
construction de fil

Et j'ai cette erreur

@Timer , #11837 semble utiliser css et pas moins. Cette question est probablement plus large.

> Pour tous ceux qui sont toujours intéressés, consultez les dépôts suivants

Suivant avec Ant-LESS
https://github.com/mit123suki/next-ant-less

Suivant avec Ant-CSS
https://github.com/mit123suki/next-ant-css

@mit123suki Hé, cela fonctionne parfaitement chez localhost, merci ! Mais lorsque j'essaie de le déployer sur Vercent, j'obtiens le message d'erreur suivant :

16:47:15.971
Utilisation de la configuration babel externe
16:47:15.971
Emplacement : "/zeit/68a93b6e/.babelrc"
16:47:33.622
Échec de la compilation.
16:47:33.623
./pages/signin.js
16:47:33.623
Module introuvable : impossible de résoudre '../components/Signin' dans '/zeit/68a93b6e/pages'
16:47:33.623
Une erreur de construction s'est produite
16:47:33.623
Erreur : > Échec de la construction en raison d'erreurs du pack Web
16:47:33.623
à la construction (/zeit/68a93b6e/node_modules/next/dist/build/index.js:13:900)
16:47:33.733
error La commande a échoué avec le code de sortie 1.
16:47:33.733
info Visitez https://yarnpkg.com/en/docs/cli/run pour obtenir de la documentation sur cette commande.
16:47:33.743
Erreur : La commande "Yarn run build" s'est terminée avec 1
16:47:35.695
Fait avec "package.json"

Éditer:
@ mit123suki Merci pour la réponse. Ouais, mauvais de ma part. J'ai remarqué que j'avais des fautes de frappe dans l'import. Bizarre que cela fonctionne sur localhost.

@RiatIO, veuillez ouvrir un problème sur mon dépôt. Btw j'ai mis à jour les repos récemment. Alors tirez le dernier code si vous ne l'avez pas déjà fait et voyez si le problème persiste. Merci. Pour tous ceux qui ont des problèmes avec les dépôts, veuillez déposer un problème là-bas, pas ici s'il vous plaît. Gardez ce fil propre, merci.

Ma solution :

yarn add esm

"scripts": {
    "dev": "NODE_OPTIONS=\"-r esm\" next",
    "build": "NODE_OPTIONS=\"-r esm\" next build",
    "start": "NODE_OPTIONS=\"-r esm\" next start"
}

cela marche!!

@mcyleung vous
J'utilise l'exemple de configuration with-ant-design-less et la solution @i-tengfei mais j'ai toujours le même problème

@xedef quel problème ?

J'ai essayé https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less comme passe-partout et je l'ai poussé vers Heroku. J'ai obtenu des scores Lighthouse assez bas et deux des solutions recommandées menaient à peu près au CSS.

Solutions recommandées :

• Suppression du CSS non utilisé (ce qui, je pense, vient du fait que tout le CSS d'antd a été importé)
• Minify CSS (Voici ce dont je ne suis pas sûr)

Quelqu'un pourrait m'aider?

@raindecastro Ant-design fonctionne en important tous les CSS nécessaires lors de l'importation du composant. Par conséquent, si vous transmettez une option qui modifie son apparence -- comme l'ajout de l'option mode="multiple" à Select -- alors le CSS sera déjà inclus. Malheureusement, cela a le sideEffect d'importer d'autres CSS qui peuvent ne pas être utilisés.

Le plus gros problème est qu'ant-design n'est pas une petite bibliothèque ( 48,3 Mo décompressés et environ 1,5 Mo + compressé) et qu'elle comporte de nombreuses dépendances . Par conséquent, des scores de phare inférieurs sont en quelque sorte attendus lors de son utilisation. C'est l'une des principales raisons pour lesquelles j'ai lentement migré de l'ant-design à l'utilisation directe de leurs dépendances de composant de réaction (rc) ou plus récemment à la conception de mes propres composants d'interface utilisateur .

Jetez un œil à ces graphiques en morceaux de with-ant-design-less prêts à l'emploi :
Ant-design représente 2,13 Mo de 3,11 Mo (

Cependant... il y a deux choses que vous pouvez faire pour réduire la taille du paquet :

1.) Supprimez les moment locales :
config.plugins.push(new IgnorePlugin(/^\.\/locale$/, /moment$/));

2.) Exportez uniquement les icônes de @ant-design/icons/dist dont vous avez besoin :

config.resolve.alias = {
  ...config.resolve.alias,
  "@ant-design/icons/lib/dist$": path.resolve(`./icons/index.js`),
};

icons/index.js (si vous importez d'autres composants nécessitant des icônes, ils devront être ajoutés manuellement à ce fichier)

/**
 * Exports only required ant-design icons (otherwise the entire 500kb library is included)
 *
 */
export { default as CalendarOutline } from "@ant-design/icons/lib/outline/CalendarOutline";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";
export { default as DownOutline } from "@ant-design/icons/lib/outline/DownOutline";
export { default as LeftOutline } from "@ant-design/icons/lib/outline/LeftOutline";
export { default as RightOutline } from "@ant-design/icons/lib/outline/RightOutline";

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;
  },
});

Jetez un œil à ces graphiques en morceaux :
Ant-design représente toujours 1,2 Mo sur 2,11 Mo (

@mattcarlotta Tout d'abord, merci ! C'était l'une des réponses les plus approfondies que j'ai jamais obtenues à partir de problèmes comme celui-ci ! Cela étant dit, même si antd est l'une de mes bibliothèques de composants préférées, les optimisations prêtes à l'emploi semblent être un gros inconvénient. Je vais d'abord essayer deux de vos recos pour réduire la taille du paquet, puis vérifier les scores de performance à partir de là en espérant que cela bougerait un peu. Bien que si cela semble encore assez lent, je suppose qu'il est temps de chercher une autre option. Ça te dérange si je t'envoie un e-mail ? Il y a quelque chose que je veux vérifier et je ne veux pas abuser de ce fil.

je viens d'utiliser rsuite maintenant