Возможно, я не поддерживаю css из node_modules.

Возможно, я не поддерживаю css из node_modules.

если вы не используете [RFC] поддержку css, вы можете поддерживать css из node_modules с помощью плагина-css.

Ссылка на # 8626

Мне тоже было бы интересно это увидеть. Наши команды используют antd с next-css / next-less и некоторые хаки сверху из папки примеров Next.js. Эта установка довольно неуклюжая и хрупкая. Я с нетерпением жду перехода на встроенную поддержку css, но понятия не имею, как справиться с меньшим в этом случае.

antd - довольно популярный фреймворк для пользовательского интерфейса, поэтому я думаю, что довольно многим разработчикам будет полезен новый пример.

У кого-нибудь еще работает ant-design с Next 9.2? (без @ zeit / next-css)

@stephankaag , я использовал withLess для использования antd v4.0.0.rc1, работает!

Я все еще вижу проблемы с antd 4.0.

Конфигурация аналогична [ https://levelup.gitconnected.com/lets-create-a-project-with-nextjs-antd-and-deploy-with-now-sh-e38772348312 | это руководство]

@stephankaag , я использовал withLess для использования antd v4.0.0.rc1, работает!

Конечно, потому что эта комбинация всегда работала. Я пытаюсь заставить все работать БЕЗ @ zeit / next-css или @ zeit / next-less.

Кто-нибудь успешно интегрировал следующую 9.2 с дизайном муравьев? (без плагина next-css)

@stephankaag Комбинация работает очень хорошо (я использую withCss в сочетании с переменными withLess и custom less), но каков размер вашего пакета?
Я перешел на antd4. Похоже, дрожание дерева работает не так, как ожидалось от версии 4. У меня размер пакета более 1,3 МБ, большая часть которого - значки antd.
Согласно этому https://github.com/ant-design/babel-plugin-import/issues/402 "libraryDirectory": "es" необходим (в официальном примере with-ant-less его нет).
Но добавление этого дает мне следующую ошибку:

[ 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 Комбинация работает очень хорошо (я использую withCss в сочетании с переменными withLess и custom less), но каков размер вашего пакета?
Я перешел на antd4. Похоже, дрожание дерева работает не так, как ожидалось от версии 4. У меня размер пакета более 1,3 МБ, большая часть которого - значки antd.
Согласно этому ant-design / babel-plugin-import # 402, "libraryDirectory": "es" необходим (в официальном примере with-ant-less его нет).
Но добавление этого дает мне следующую ошибку:

[ 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 Вам удалось это решить? Я столкнулся с той же проблемой на Nextjs 9.2.1

Кому-нибудь удается решить эту проблему?

Есть обновления по этой проблеме?

Мое решение:

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 Вау, работает! Большое спасибо!

@ i-tengfei вы используете ту же конфигурацию, что и в примере?

Если нет, не могли бы опубликовать свой файл next.config & babelrc?

Кстати, я не использую новую поддержку CSS. Что работает дальше с antd4 tree shacked (tree shacked никогда не работал с antd в официальном примере из-за отсутствия "libraryDirectory":"es" ). Я считаю, что размер пакета сократился примерно на 700-800кб. Я все еще использую withCss и withLess tho.

@chemicalkosek вы все еще видите:

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

с вашей настройкой?

Да, но, черт возьми, это просто предупреждение, и все работает нормально.
Однажды я исследовал эту проблему, и я считаю, что это потому, что у вас есть один компонент:

import { Button, Input } from 'antd'

и в другом компоненте:

import { Input, Button } from 'antd'

Предположительно, это то, что создает эту проблему, но я не совсем уверен в этом
Вы можете скрыть эти предупреждения, но я не пробовал. Я попробую завтра, это может сильно раздражать.
Источник 1: https://github.com/webpack-contrib/mini-css-extract-plugin#remove -order-warnings
Источник 2: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
Я очень рад, что дерево теперь трясется :) И с antd4 значки больше не включаются, как с antd3, где значки сделаны как половина размера antd3. Теперь вы можете выборочно импортировать значки.

К сожалению, мой опыт показывает, что это не просто предупреждение, которое можно просто игнорировать. Я видел проблемы с компонентами, которые не были стилизованы, поскольку я добавил на страницу больше компонентов antd. Бывает очень противоречиво. Последовательная организация импорта также не устраняет его

Вы имеете в виду в dev? Да, я иногда сталкиваюсь с тем, что компоненты не стилизованы. Не слишком часто. Работает после обновления страницы. У вас такая же проблема на производстве? В продакшене после next build у меня все работает нормально. Хотя в журналах сборки у меня такие же сообщения о «конфликтующем порядке».

@chemicalkosek Мне кажется, я видел это в производстве, но я не уверен на 100% ...

Надеюсь ты прав

FWIW это периодически случается с нами и в производственных сборках.

_удаленный_

@ssteiger , о

Упс извините. Неправильная нить.

У кого-нибудь есть рабочий дизайн муравья 4 (меньше) + nextjs 9.2 + Избегать противоречивого порядка?

Также хотелось бы увидеть пример с @ ant-design / pro-layout. Кто-нибудь видит рабочее репо?

Муравей. design @ 4 работает с [email protected] без next.config.js.

Мой код на страницах / _app.js:

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

package.json это:

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

@ImAbdullahJan Да, работает, но с загрузкой полного css-пакета. Можно ли использовать babel-plugin-import без @zeit/withCss ?

любая подсказка, как мне справиться с less (ant) с новой встроенной поддержкой css и sass?

Ооо, я не должен был обновляться. сломал мое приложение выше моей зарплаты

Ооо, я не должен был обновляться. сломал мое приложение выше моей зарплаты

то же самое

@OliverRudoll @coderdix что сломалось? встроенная поддержка CSS / Sass отключена, когда вы используете @ zeit / next-css, поэтому обновление не должно прерываться.

@OliverRudoll @coderdix что сломалось? встроенная поддержка CSS / Sass отключена, когда вы используете @ zeit / next-css, поэтому обновление не должно прерываться.

Спасибо, что спросили Тима. Отказ от ответственности: это мой первый год со следующим, и я не совсем разбираюсь в концепциях.

Что я могу вам сказать, так это то, что следующая конфигурация работает с «очень» старой версией (следующая 9.0.4). Когда я обновляюсь до 9.2.2 или 9.3 и прекращаю использовать внешние подключаемые модули Sass / Css в конфигурации, у меня возникает проблема с конфигурацией Babel.

Я пока что откатился на старую версию из-за нехватки времени - попробую еще раз попробовать обновление и подробно опишу свою проблему как можно скорее.

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, какой у вас размер сборки для типичной формы или для данного примера с дизайном с муравьями? Можете ли вы успешно очистить ant css?

@ mit123suki В моем случае меня больше беспокоят сломанные стили, чем размер страницы, поэтому я _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} />;

При этом мой css chuck, кажется, сжат примерно на ~ 62 КБ. Я в значительной степени полагаюсь на 99% стилей antd для своего приложения.

@ mit123suki Выполнение build- esm в настоящее время вызывает у меня ошибку (даже когда я закомментировал libraryDirectory ), но размер сборки составляет 880 КБ и с esm и libraryDirectory: es это 720 КБ в сжатом виде (не маленькое приложение). Но, как ни странно, сейчас, даже без esm, я не вижу в комплекте всего пакета antd icons, который, как мне кажется, составляет сотни килобайт. Может быть, из-за того, что это ошибка, я не вижу ее в комплекте, и цифры теперь неточные.

Но определенно без esm и "libraryDirectory": "es" я могу видеть весь включенный пакет antd (как ни странно - прямо сейчас без значков). С esm дерево потрясено.

Без "libraryDirectory": "es" (самый большой кусок с antd):

С "libraryDirectory": "es" (теперь antd встряхивается, а не отображается как самый большой кусок)

@ mit123suki Спасибо! После вашей настройки в https://github.com/zeit/next.js/pull/11837 заставил его работать на next.js 9.3.4

@ mit123suki Транспилирование / компиляция esm кажется немного деспотичным и может не создавать блоки, которые работают в старых браузерах.

Тем не менее, я смог уменьшить размер пакета:

к:

используя папку antd/lib ...

babel.config.js (без настраиваемой следующей конфигурации style: css следует удалить, а вместо этого следует вручную импортировать всю библиотеку: import "antd/dist/antd.min.css"; в настраиваемый файл _app.js page)

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"],
    ],
  };
};

Вышеупомянутая конфигурация не требует esm транспиляции / компиляции. Тем не менее , папка es по- прежнему требуется веб-пакету в производственной сборке, несмотря на то, что она не используется / не требуется ВООБЩЕ и даже когда она была привязана к пустому файлу (см. Сообщение ниже, чтобы узнать, почему это может произойти).

После нескольких часов отладки основной причиной всего импорта пакета es может быть либо неиспользование babel-import-plugin с пакетом ant/lib ИЛИ использование next/dynamic package неправильно.

Если вы используете babel.config.js, который я показал выше, и вы не используете dynamic , тогда ваша производственная сборка не должна включать папку antd/es не должна компилировать / транспилируйте пакеты esm муравья.

Однако, похоже, что некоторые импортированные муравьи (например, Table ) прерывают встряхивание дерева icons , и он импортирует всю библиотеку @ant-icons несмотря на использование babel-plugin-import . Чтобы смягчить эту проблему, вам нужно вручную экспортировать нужные значки из пользовательского файла, а затем alias @ant-icons пакет в этот файл в конфигурации webpack next.config.js (ПРИМЕЧАНИЕ: К сожалению, если вам нужно использовать дополнительные значки из библиотеки @ant-icons или использовать дополнительные компоненты antd , тогда вам нужно будет экспортировать все необходимые значки). В приведенном ниже рабочем примере показано, как это сделать ...

Рабочий пример :

1. Пример репозитория клонирования: git clone [email protected]:mattcarlotta/antd-example.git
2. Установить зависимости: yarn
3. Запустите yarn outputs чтобы пройти по разным ветвям: master , dynamic и unoptimized чтобы создать рабочие файлы и отобразить полученные графики фрагментов.

Полученные результаты

Прямой импорт таблиц и значков псевдонимов (основная ветка) :

import { Table } from "antd";

Результаты на этом графике (проанализировано: 797,19 КБ)

Использование dynamic для импорта значков ant / lib / table и псевдонимов (динамическая ветвь) :

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

Результаты на этом графике (проанализировано: 805,73 КБ):

Использование динамики для всего пакета без наложения значков (неоптимизированная ветка) :

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

Результаты на этом графике (проанализировано: 2,32 МБ):

См. Сообщение ниже для результатов esm .

Потрясающая работа @mattcarlotta
Да, транспиляция с помощью esm - это накладные расходы, и я тоже хочу избежать этого, но дрожание дерева, похоже, не работает без es libdirectory, и для этого требуется esm. Также вызывает некоторую ошибку без этого. Система дизайна Antd представляет собой сложную загрузку всех стилей рекурсивно, скажем, например, просто создайте компонент Button и используйте меньше плагинов, и вы сможете увидеть все загруженные стили. К счастью, babel-plugin-import в некоторой степени помогает избежать этого, явно импортировав необходимые компоненты и их стиль с помощью конфигурации babel. Если вы используете css, вам также необходимо включить весь файл css в _app, в противном случае он сломается, поскольку от него зависят все компоненты. Очистка css на этом этапе также решает множество проблем, хе-хе.
Размер моей установочной сборки кажется мне вполне приличным, но опять же, как вы сказали, накладные расходы на передачу esm - это проблемы.

Ваш последний пример с использованием компонента css.js import выглядит интересным. Проверю репо :)

@ mit123suki С помощью babel-plugin-import и настраиваемой конфигурации следующего веб-пакета встряхивание дерева (или, по крайней мере, только то, что требуется для правильной работы компонента) будет работать с папкой antd/lib , поэтому , использование папки antd/es (esm) может не потребоваться.

Из любопытства, что дает esm build, когда импортируется только Button ?

Например, импорт только компонента Button :

Как показано здесь, он импортирует только то, что требуется в файле antd/lib/button.js :

Хм ... Я нахожусь на грани использования деспотичного подхода к одной посылке. Тем не менее, результаты использования пакета esm , показанные ниже, говорят сами за себя. Однако есть компромисс: совместимость браузера и время транспиляции / компиляции.

Анализируемый размер: 692,73 КБ ( уменьшение на ~ 100 КБ по сравнению с использованием ant/lib master ветки )

Вот еще несколько результатов из личного проекта среднего размера:

| Попытки компиляции |

1-я сборка - успешно скомпилирована за 39472 мс (всего 51,09 с)
2-я сборка - успешно скомпилирована за 34971 мс (всего 49,71 с)
3-я сборка - успешно скомпилирована за 34368 мс (всего 49,34 с)
4-я сборка - успешно скомпилирована за 34867 мс (всего 49,40 с)
5-я сборка - успешно скомпилирована за 34071 мс (всего 49,58 с)

| График результатов - Успешно скомпилировано за 34863 мс (всего 56,36 с) |

Сервер:
Статистика: Все (8,07 МБ)
Разобрано: Все (11,28 МБ)
Gzip: Все (2,14 МБ)
-
Клиент:
Статистика: Все (7,74 МБ)
Разобрано: Все (2,8 МБ)
Gzip: Все (789,13 КБ)
-
Количество фрагментов Ant: 96 (общий размер: 282,74 КБ)

| Попытки компиляции |

1-я сборка - успешно скомпилирована за 36334 мс (всего 43,72 с)
2-я сборка - успешно скомпилирована за 34878 мс (всего 42,51 с)
3-я сборка - успешно скомпилирована за 31138 мс (всего 42,10 с)
4-я сборка - успешно скомпилирована за 31732 мс (всего 41,41 с)
5-я сборка - успешно скомпилирована за 35435 мс (всего 43,92 с)

| График результатов - Успешно скомпилировано за 36166 мс (всего 57,03 с) |

Сервер:
Статистика: Все (8,07 МБ)
Разобрано: Все (11,28 МБ)
Gzip: Все (2,14 МБ)
-
Клиент:
Статистика: Все (8,01 МБ)
Разобрано: Все (2,94 МБ)
Gzip: Все (820,81 КБ)
-
Количество фрагментов Ant: 204 (общий размер: 1,05 МБ)

В моем текущем проекте сборка выдает ошибку без esm и libraryDirectory: es на этом:

> 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)

Я использую это новое дополнение к antd4, чтобы заменить moment.js на day.js:
https://ant.design/docs/react/replace-moment

Это всего лишь краткая информация, дальнейшее исследование не проводилось, на данный момент вернулись к esm как это находящееся в стадии разработки приложение.

@chemicalkosek Проблема в настройке babel и отображается в ошибке:

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

Ваша конфигурация babel нацелена на esm ( "libraryDirectory": "es" ). Если вы хотите использовать cjs (или это umd , на самом деле не слишком внимательно), тогда используйте babel-plugin-import для таргетинга lib ( "libraryDirectory": "lib" ).

См. Выше конфигурацию babel .

Есть обновления по этой проблеме?

@ sebas-deedee Нет никакого пути вперед, пока следующий поддерживает загрузку CSS из node_modules
и это, вероятно, не будет поддерживаться, потому что в настоящее время это может привести к неупорядоченному импорту CSS - например, сначала загружается файл overrides.css , а затем - второй node_module/antd/component/style.css что приводит к несогласованному пользовательскому интерфейсу / UX. А пока у вас есть два варианта:

Вариант 1. ) Используйте настраиваемый babel и следующую конфигурацию для загрузки CSS из папок node_modules/antd/lib или node_modules/antd/es на клиенте. Преимущество в том, что вы импортируете только то, что вам нужно. Недостатком является то, что вам нужно очень детально импортировать. Это означает, что вам нужно вручную импортировать стили, необходимые для каждого компонента, потому что при начальной загрузке страницы сервер не будет обрабатывать импорт CSS; следовательно, CSS должен быть импортирован в файл _app.js . Например:

в вашем файле _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

и в файле страницы или компонента

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

В результате импортируемые стили загружаются последовательно в соответствии с их положением импорта, а ваша производственная сборка меньше, потому что вы выбираете компоненты и CSS.

или

Вариант 2. ) Скопируйте / вставьте все ant.min.css из node_modules/dist/ant.min.css в файл global.css . Затем импортируйте этот файл в файл _app.js . Преимущество состоит в том, что вам не нужна настраиваемая следующая конфигурация для импорта из node_modules ; однако вам все равно придется импортировать всю CSS-библиотеку ant-design. Следовательно, недостатком является то, что ваша производственная сборка будет иметь довольно большой файл CSS, который будет использоваться только теми компонентами, которые вы импортировали - остальное будет просто мертвым CSS.

в вашем _app.js файле:

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

и в файле страницы или компонента

import { Table } from "antd"

В результате импортируемые стили загружаются последовательно по позиции импорта, но производственная сборка больше из-за неиспользуемого CSS.

Ни один из вариантов не особенно удобен для разработчиков / не требует настройки, поэтому я бы не стал использовать его в официальном примере with-ant-design .

Тем не менее, вот рабочий пример обоих вариантов выше с использованием next: ^9.3.5 с antd: ^4.1.4 :
1.) Скопируйте пример: [email protected]:mattcarlotta/next-antd-v4.git
2.) Установите зависимости: yarn
3.) Запустите первый вариант, запустив: yarn dev
4.) По завершении завершите процесс и введите: git checkout globals
5.) Запустите второй вариант, запустив: yarn dev

На мой взгляд, один из лучших способов использовать antd с @ant-design/pro-layout - это просто переименовать все ваши файлы .css в .less . LESS обратно совместим с CSS. Таким образом, вам не нужно взламывать конфигурацию babel. Это простой и менее опасный способ.

Если вам нужен пример NextJS + antd + @ant-design/pro-layout , вы можете проверить это: https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/ tree / master / apps / _example04antpro (но вы должны использовать расширение .less для ваших файлов .css )

@pahaz Ваш пример не может быть

@mattcarlotta, не могли бы вы объяснить свою настройку.
Я добавил действие CI для тестирования сборки. Тест CI для узла v10 и узла v12
https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/runs/615670863

@pahaz Извините, это была ошибка пользователя. Хотя этот подход работает, к сожалению, он не очень гибок для уже существующих проектов, использующих Sass. Тем не менее, поощрение разработчиков к использованию less вместо импорта css - это всего лишь еще один обходной путь к исходной проблеме: невозможность импортировать CSS из node_modules.

В этой заметке есть официальный пример with-ant-design-less, который дает результат, аналогичный вашему примеру.

Возможно, вы захотите отправить в Vercel пример, в котором используется пакет @ant-design/pro-layout .

Если кому-то из Vercel интересен пример, создам пиар.

Если кому-то из Vercel интересен пример, создам пиар.

Пожалуйста, я хочу.

На мой взгляд, один из лучших способов использовать antd с @ant-design/pro-layout - это просто переименовать все ваши файлы .css в .less . LESS обратно совместим с CSS. Таким образом, вам не нужно взламывать конфигурацию babel. Это простой и менее опасный способ.

Если вам нужен пример NextJS + antd + @ant-design/pro-layout , вы можете проверить это: https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/ tree / master / apps / _example04antpro (но вы должны использовать расширение .less для ваших файлов .css )

Если вы используете меньше для всего, он изменяет глобальные стили для тех же имен классов, чтобы избежать этого, вы можете включить модули css и писать файлы css.

Я подготовил репо для меньшего количества здесь, https://github.com/mit123suki/next-ant-less.git

Для всех, кто все еще заинтересован, ознакомьтесь со следующими репозиториями

Далее с Ant-LESS
https://github.com/mit123suki/next-ant-less

Далее с Ant-CSS
https://github.com/mit123suki/next-ant-css

@ mit123suki Coul объясните, пожалуйста, в чем разница между вашим примером и официальными примерами?

https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less - меньше
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design - css

@ mit123suki Coul объясните, пожалуйста, в чем разница между вашим примером и официальными примерами?

https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less - меньше
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design - css

• Встряхивание дерева с помощью esm,
• детальный импорт с использованием babel-plugin-import
• Замена локалей Ant при использовании Date-Picker с использованием плагина dayjs, уменьшающего пакет antd furthur
• Включены локальные модули с перегруженным файлом cssvars.css, поэтому переменные напрямую доступны в модулях css.

В целом это приводит к уменьшению размера пакета приложений и правильной загрузке стилей. Вы можете проанализировать пряжу и сравнить результаты.

@ mit123suki Эта строка импортирует все стили? Встряхивание дерева с помощью esm только для javascripts?

@ mit123suki Эта строка импортирует все стили? Встряхивание дерева с помощью esm только для javascripts?

вы можете удалить эту строку и изменить стиль babelrc import antd на true. Он работает так же, за исключением того, что теперь у нас есть конфликт стилей ч / б компонентов.

да, только для файлов javascript, вы можете использовать purgecss, но это нарушает стили

@ mit123suki Coul объясните, пожалуйста, в чем разница между вашим примером и официальными примерами?
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less - меньше
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design - css

• Встряхивание дерева с помощью esm,
• детальный импорт с использованием babel-plugin-import
• Замена локалей Ant при использовании Date-Picker с использованием плагина dayjs, уменьшающего пакет antd furthur
• Включены локальные модули с перегруженным файлом cssvars.css, поэтому переменные напрямую доступны в модулях css.

В целом это приводит к уменьшению размера пакета приложений и правильной загрузке стилей. Вы можете проанализировать пряжу и сравнить результаты.

Невозможно построить из вашего меньшего количества репо. Это дало мне следующую ошибку:
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 я забыл добавить в esm скрипт для запуска. Вытяните последний код. Это должно исправить ошибку, если не указать проблему. Спасибо

@ 2huBrulee, что это за репо? "импортировать {строку} из '../grid';" -что это? Это библиотека antd? Если это так, следует импортировать {Row} из 'antd'. Проверьте мой github на наличие моих репозиториев.

Из вашего репо "меньше" я сделал:
пряжа
сборка пряжи

И получил эту ошибку

@Timer , # 11837 вроде бы использует css и не меньше. Этот вопрос, вероятно, шире.

> Для всех, кто все еще заинтересован, ознакомьтесь со следующими репозиториями

Далее с Ant-LESS
https://github.com/mit123suki/next-ant-less

Далее с Ant-CSS
https://github.com/mit123suki/next-ant-css

@ mit123suki Эй, это отлично работает на localhost, спасибо! Но когда я пытаюсь развернуть его на Vercent, я получаю следующее сообщение об ошибке:

16: 47: 15.971
Использование внешней конфигурации babel
16: 47: 15.971
Расположение: "/zeit/68a93b6e/.babelrc"
16: 47: 33.622
Не удалось скомпилировать.
16: 47: 33.623
./pages/signin.js
16: 47: 33.623
Модуль не найден: не удается разрешить "../components/Signin" в "/ zeit / 68a93b6e / pages"
16: 47: 33.623
Произошла ошибка сборки
16: 47: 33.623
Ошибка:> Сбой сборки из-за ошибок веб-пакета
16: 47: 33.623
при сборке (/zeit/68a93b6e/node_modules/next/dist/build/index.js:13:900)
16: 47: 33,733
error Команда не удалась с кодом выхода 1.
16: 47: 33,733
info Посетите https://yarnpkg.com/en/docs/cli/run для документации по этой команде.
16: 47: 33.743
Ошибка: команда "yarn run build" завершена с 1
16: 47: 35.695
Готово с "package.json"

Редактировать:
@ mit123suki Спасибо за ответ. Да, плохо с моей стороны. Обратил внимание на опечатки при импорте. Странно, что это сработало на localhost.

@RiatIO, пожалуйста, откройте вопрос в моем репо. Кстати, недавно я обновил репозитории. Так что вытащите последний код, если вы еще этого не сделали, и посмотрите, сохраняется ли проблема. Спасибо. Для тех, у кого есть проблемы с репозиториями, сообщите об этом здесь, а не здесь. Держите эту ветку в чистоте, спасибо.

Мое решение:

yarn add esm

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

это работает!!

@mcyleung, что хотите поделиться своей конфигурацией?
Я использую конфигурацию with-ant-design-less example и решение @ i-tengfei, но у меня все еще та же проблема

@xedef какая проблема?

Я пробовал https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less в качестве шаблона и отправил его на Heroku. Я получил довольно низкие оценки Lighthouse, и два из рекомендуемых решений в значительной степени вели к CSS.

Рекомендуемые решения:

• Удален неиспользуемый CSS (я думаю, это связано с тем, что был импортирован весь CSS из antd)
• Сократите CSS (вот в чем я не уверен)

Может ли кто-нибудь мне помочь?

@raindecastro Ant-design импортирует весь необходимый CSS при импорте компонента. Следовательно, если вы передадите параметр, который изменяет его внешний вид - например, добавление параметра mode = "multiple" в Select - тогда CSS уже будет включен. К сожалению, здесь есть sideEffect импорта другого CSS, который может не использоваться.

Более серьезная проблема заключается в том, что ant-design - это не маленькая библиотека ( 48,3 МБ в распакованном виде и более 1,5 МБ в упаковке), и с ней связано множество зависимостей . Таким образом, при его использовании ожидаются более низкие оценки Lighthouse. Это одна из основных причин, по которой я медленно перешел от ant-design либо к прямому использованию зависимостей их компонентов реакции (rc), либо к разработке собственных компонентов пользовательского интерфейса в последнее время.

Взгляните на эти графы фрагментов with-ant-design-less в готовом виде:
Ant-design занимает 2,13 МБ из 3,11 МБ (проанализировано)

Однако ... есть две вещи, которые вы можете сделать, чтобы уменьшить размер пакета:

1.) Удалите moment locales:
config.plugins.push(new IgnorePlugin(/^\.\/locale$/, /moment$/));

2.) Экспортируйте только нужные значки из @ant-design/icons/dist :

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

icons / index.js (если вы импортируете другие компоненты, для которых требуются значки, их нужно будет вручную добавить в этот файл)

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

Взгляните на эти графики фрагментов:
Ant-design по-прежнему занимает 1,2 МБ из 2,11 МБ (проанализировано)

@mattcarlotta Прежде всего, спасибо! Это был один из самых подробных ответов, которые я когда-либо получал от подобных проблем! При этом, несмотря на то, что antd - одна из моих любимых библиотек компонентов, оптимизация из коробки кажется довольно большим недостатком. Сначала я попробую два из ваших рецептов, чтобы уменьшить размер пакета, а затем проверю оценки производительности оттуда, надеясь, что он немного сдвинется с места. Хотя, если он все еще кажется довольно медленным, думаю, пора поискать другой вариант. Вы не возражаете, если я пришлю вам электронное письмо? Есть кое-что, что я хочу проверить, и я не хочу злоупотреблять этой веткой.

я просто использую rsuite сейчас