next.js 🚀 - 为新的 CSS 支持更新 Ant 设计示例 (9.2)

我猜可能不支持来自 node_modules 的 css。

YUFENGWANG 于 2019-12-26

我猜可能不支持来自 node_modules 的 css。

如果您不使用 [RFC] css support ，则可以使用带有 css 插件的 node_modules 支持 css。

poyiding 于 2019-12-26

链接到#8626

timneutkens 于 2019-12-26

我也有兴趣看到这个。我们的团队使用 antd 和 next-css/next-less 以及 Next.js 示例文件夹中的一些技巧。这种设置非常笨拙和脆弱。我期待切换到内置 css 支持，但不知道在这种情况下如何处理 less。

antd 是一个非常流行的 ui 框架，所以我猜很多开发人员会从一个新的例子中受益。

kachkaev 于 2019-12-26

👍7

有没有人让 ant-design 与 Next 9.2 一起工作？（没有@zeit/next-css）

stephankaag 于 2020-01-20

👍5

@stephankaag ，我使用 withLess 来使用 antd v4.0.0.rc1，它有效！

jonahfang 于 2020-01-24

我仍然看到 antd 4.0 的问题。

配置类似于[ https://levelup.gitconnected.com/lets-create-a-project-with-nextjs-antd-and-deploy-with-now-sh-e38772348312 |本指南]

ChuckJonas 于 2020-01-24

@stephankaag ，我使用 withLess 来使用 antd v4.0.0.rc1，它有效！

当然，因为这种组合总是有效的。我试图在没有 @zeit/next-css 或 @zeit/next-less 的情况下使事情正常工作。

stephankaag 于 2020-01-24

👀4

有人已经成功地将 next 9.2 与 ant design 集成了吗？（没有next-css插件）

dpyzo0o 于 2020-02-04

@stephankaag这种组合效果很好（我将 withCss 与 withLess 和自定义的 less 变量结合使用），但是您的包大小如何？
我已经迁移到 antd4。似乎摇树不能按 v4 的预期工作。我有超过 1,3mb 的包大小，其中大部分是 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

chemicalkosek 于 2020-02-06

@stephankaag这种组合效果很好（我将 withCss 与 withLess 和自定义的 less 变量结合使用），但是您的包大小如何？
我已经迁移到 antd4。似乎摇树不能按 v4 的预期工作。我有超过 1,3mb 的包大小，其中大部分是 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 上遇到了完全相同的问题

DuncanAForbes 于 2020-02-06

有人设法解决这个问题吗？

jeromemmiranda 于 2020-02-07

此问题有任何更新吗？

gjvpaet 于 2020-02-07

我的解决方案：

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 于 2020-02-12

👍2

@i-tengfei 哇，它起作用了！非常感谢！

chemicalkosek 于 2020-02-12

@i-tengfei 你使用的配置与示例相同吗？

如果没有，介意发布你的 next.config 和 babelrc 吗？

ChuckJonas 于 2020-02-12

顺便说一句，我没有使用新的 CSS 支持。接下来工作的是 antd4 树抖动（在官方示例中，树抖动从未与 antd 一起使用，因为缺少"libraryDirectory":"es" ）。我相信捆绑包大小减少了大约 700-800kb。我仍在使用 withCss 和 withLess tho。

chemicalkosek 于 2020-02-12

@chemicalkosek你还能看到：

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

你的设置？

ChuckJonas 于 2020-02-12

是的，我知道，但是 afaik 这只是一个警告，一切正常。
我曾经研究过这个问题，我相信这是因为你有一个组成部分：

import { Button, Input } from 'antd'

在另一个组件中：

import { Input, Button } from 'antd'

据说这是造成这个问题的原因，但我不太确定
你可以隐藏这些警告，但我没有尝试。不过我明天试试，这些可能很烦人。
来源 1： https :
来源 2： https :
我现在对树摇晃感到非常高兴:) 使用 antd4 时，图标不再包含在 antd3 中，其中图标大小为 antd3 的一半。您现在可以有选择地导入图标。

chemicalkosek 于 2020-02-12

不幸的是，我的经验是这不仅仅是一个你可以忽略的警告。我已经看到组件没有样式化的问题，因为我向页面添加了更多 antd 组件。发生非常不一致。始终如一地组织进口也不会让它消失

ChuckJonas 于 2020-02-12

你的意思是在开发？是的，我有时在开发中遇到组件没有样式的情况。不经常。刷新页面后工作。您在生产中是否有同样的问题？在next build之后的生产中，一切对我来说都很好。即使我在构建日志中有相同的“冲突订单”消息。

chemicalkosek 于 2020-02-12

@chemicalkosek我觉得我在生产中看到过它，但我不是 100% 确定......

希望你是对的

ChuckJonas 于 2020-02-12

FWIW 在我们的生产版本中也会间歇性地发生这种情况。

JesperWe 于 2020-02-13

👍1

_移除_

ssteiger 于 2020-02-17

@ssteiger我们正在谈论不使用 @zeit/next-css 插件。

poyiding 于 2020-02-18

对不起。错误的线程。

ssteiger 于 2020-02-18

有没有人使用 ant design 4 (less) + nextjs 9.2 + 避免顺序冲突？

marcelobaez 于 2020-03-07

👀14

另外，想看看@ant-design/pro-layout 的例子。有人看到工作回购吗？

oceandrama 于 2020-03-10

蚂蚁。设计@ 4有工作[email protected]没有next.config.js。

我在 pages/_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 于 2020-03-12

👎8

@ImAbdullahJan是的，它可以工作，但需要加载完整的 css-bundle。是否可以在没有@zeit/withCss情况下使用babel-plugin-import @zeit/withCss ？

oceandrama 于 2020-03-12

👍4

任何线索我如何处理less(ant) 与新的内置支持css 和sass？

mit123suki 于 2020-03-15

👍3

awww 我不应该升级。打破了我的应用程序高于我的工资等级

coderdix 于 2020-04-02

😄1

awww 我不应该升级。打破了我的应用程序高于我的工资等级

同样在这里

OliverRudoll 于 2020-04-07

@OliverRudoll @coderdix什么破了？当您使用 @zeit/next-css 时，内置 CSS/Sass 支持被禁用，因此更新应该是不间断的。

timneutkens 于 2020-04-08

@OliverRudoll @coderdix什么破了？当您使用 @zeit/next-css 时，内置 CSS/Sass 支持被禁用，因此更新应该是不间断的。

谢谢你问蒂姆。免责声明：这是我与 next 的第一年，我还没有完全了解这些概念。

我可以告诉你的是，以下配置适用于“非常”旧版本（下一个 9.0.4）。当我更新到 9.2.2 或 9.3 并停止在配置中使用外部 Sass/Css 插件时，Babel 配置出现问题。

由于时间不够，我暂时回滚到旧版本 - 我将尝试再次尝试更新并尽快详细描述我的问题。

下一个.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,
  };
};

OliverRudoll 于 2020-04-08

@chemicalkosek @ChuckJonas对于典型形式或给定的 with-ant-design 示例，您的构建尺寸是多少？你能成功清除ant css吗？

mit123suki 于 2020-04-11

@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 夹头似乎大约是 ~62kb gzipped。我的应用程序几乎依赖 99% 的 antd 样式。

ChuckJonas 于 2020-04-13

@mit123suki 在没有esm情况下运行 build-analyze 目前对我来说是错误的（即使我注释掉libraryDirectory ），但构建大小为 880kb，并带有esm和libraryDirectory: es是 720kb gzipped（不是一个小应用程序）。但奇怪的是，现在即使没有 esm，我也看不到整个 antd 图标包，我相信它占了数百 kbs。也许是因为它出错了，我在捆绑包中没有看到它，而且数字现在不准确。

但绝对没有esm和"libraryDirectory": "es"我可以看到整个 antd 包包括在内（奇怪的是 - 现在没有图标）。用esm摇树。

没有"libraryDirectory": "es" （antd 的最大块）：

Zaznaczenie_883

用"libraryDirectory": "es" （antd 现在摇树不显示为最大块）

Zaznaczenie_884

chemicalkosek 于 2020-04-14

@mit123suki谢谢！按照您在https://github.com/zeit/next.js/pull/11837 中的设置使其在 next.js 9.3.4 上工作

kdenz 于 2020-04-14

@mit123suki esm转译/编译似乎有点笨手笨脚的方法，可能无法生成适用于旧浏览器的块。

也就是说，我能够减少捆绑包的大小：

到：

通过使用antd/lib文件夹...

babel.config.js（没有自定义的下一个配置， style: css应该被删除，取而代之，你应该手动导入整个库： import "antd/dist/antd.min.css";自定义内_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"],
    ],
  };
};

上述配置不需要esm转译/编译。然而， es文件夹仍然被要求的WebPack在生产版本，尽管没有被利用它/需要在所有甚至当它已经化名为一个空文件（看帖子下面为什么会发生这种情况）。

mattcarlotta 于 2020-04-15

经过数小时的调试，整个es包导入的根本原因可能是不使用babel-import-plugin和ant/lib包或使用next/dynamic包错误。

如果您使用我上面显示的 babel.config.js 并且不使用dynamic ，那么您的生产版本不应该包含antd/es文件夹，也不应该需要编译/转译 ant 的esm包。

但是，似乎某些蚂蚁导入（如Table ）破坏了摇树icons ，尽管使用了babel-plugin-import ，它仍会导入整个@ant-icons库. 为了缓解这个问题，你需要从用户定义的文件中手动导出你需要的图标，然后在next.config.js webpack 配置中将alias的@ant-icons包导出到这个文件中（注意：不幸的是，如果您需要使用@ant-icons库中的其他图标，或使用其他antd组件，那么您需要导出任何所需的图标）。下面的工作示例包括如何完成此操作...

工作示例：

克隆示例 repo： git clone [email protected]:mattcarlotta/antd-example.git
安装依赖： yarn
运行yarn outputs以遍历不同的分支： master 、 dynamic和unoptimized以构建生产文件并显示生成的块图。

结果

直接导入表和别名图标（主分支） ：

import { Table } from "antd";

此图中的结果（解析：797.19 KB）

使用动态导入 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 KB）：

在整个包上使用动态而不是别名图标（未优化的分支） ：

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 MB）：

有关esm 结果，请参阅下面的帖子。

mattcarlotta 于 2020-04-15

👍1

很棒的工作@mattcarlotta
是的，使用 esm 进行转译是一种开销，我也想避免，但是如果没有 es libdirectory，tree-shaking 似乎会失败，并且它需要 esm。没有它也会导致一些错误。 Antd 设计系统递归加载整个样式很复杂，例如，只需创建 Button 组件并使用较少的插件，您就可以看到加载的整个样式。幸运的是 babel-plugin-import 通过使用 babel config 显式导入所需的组件及其样式在一定程度上有助于避免这种情况。如果您使用 css，那么您还需要在 _app 中包含整个 css 文件，否则它会中断，因为每个组件都依赖于它。此时清除 css 也解决了很多问题呵呵。
我的设置构建大小对我来说看起来相当不错，但是正如您所说的 esm 传输开销是问题所在。

您使用组件 css.js 导入的最后一个示例看起来很有趣。我会检查回购:)

mit123suki 于 2020-04-15

@mit123suki借助babel-plugin-import和自定义的下一个 webpack 配置，摇树（或至少只需要组件正常运行所需的内容）将与antd/lib文件夹一起使用，因此，可能不需要使用antd/es (esm) 文件夹。

出于好奇，当仅导入Button时， esm构建输出是什么？

例如，只导入Button组件：

如此处所示，它仅导入antd/lib/button.js文件中所需的内容：

mattcarlotta 于 2020-04-16

嗯...我对使用强硬的方法处理一个包裹持怀疑态度。也就是说，使用esm包的结果，如下所示，不言自明。但是，有一个权衡：浏览器兼容性和转译/编译时间。

解析大小：692.73 KB（使用ant/lib master 分支减少约 100kb）

从一个中等规模的个人项目中，还有一些结果：

单击以展开 esm 结果

| 编译尝试 |

第一次构建 - 在 39472 毫秒内成功编译（总共 51.09 秒）
第二次构建 - 在 34971 毫秒内成功编译（总共 49.71 秒）
第三次构建 - 在 34368 毫秒内成功编译（总共 49.34 秒）
第四次构建 - 在 34867 毫秒内成功编译（总共 49.40 秒）
第 5 次构建 - 在 34071 毫秒内成功编译（总共 49.58 秒）

| 结果图 - 在 34863 毫秒内成功编译（总共 56.36 秒）|

服务器：
统计：全部 (8.07 MB)
已解析：全部 (11.28 MB)
Gzip：全部 (2.14 MB)
——
客户：
统计：全部 (7.74 MB)
已解析：全部 (2.8 MB)
Gzip：全部 (789.13 KB)
——
蚂蚁块数：96（总大小：282.74 KB）

单击以展开 cjs 结果

| 编译尝试 |

第一次构建 - 在 36334 毫秒内成功编译（总共 43.72 秒）
第二次构建 - 在 34878 毫秒内成功编译（总共 42.51 秒）
第三次构建 - 在 31138 毫秒内成功编译（总共 42.10 秒）
第 4 次构建 - 在 31732 毫秒内成功编译（总共 41.41 秒）
第 5 次构建 - 在 35435 毫秒内成功编译（共 43.92 秒）

| 结果图 - 在 36166ms 内成功编译（共 57.03s）|

服务器：
统计：全部 (8.07 MB)
已解析：全部 (11.28 MB)
Gzip：全部 (2.14 MB)
——
客户：
统计：全部 (8.01 MB)
已解析：全部 (2.94 MB)
Gzip：全部 (820.81 KB)
——
蚂蚁块数：204（总大小：1.05 MB）

mattcarlotta 于 2020-04-16

在我当前的项目中，构建在没有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 于 2020-04-16

@chemicalkosek问题出在 babel 设置中，并显示在错误中：

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

您的 babel 配置针对esm ( "libraryDirectory": "es" )。如果你想使用cjs （或者它是umd ，并没有仔细看）然后使用babel-plugin-import来定位lib ( "libraryDirectory": "lib" ）。

请参阅上面的babel 配置。

mattcarlotta 于 2020-04-16

此问题有任何更新吗？

sebas-deedee 于 2020-04-22

@sebas-deedee 在下一次支持从node_modules加载 CSS 之前没有任何进展
这可能不会得到支持，因为它目前可能导致无序的 CSS 导入——例如，首先加载overrides.css文件，然后是node_module/antd/component/style.css第二个——这会导致 UI 不一致/用户体验。在此之前，您有两个选择：

选项 1. ) 使用自定义 babel 和下一个配置从客户端上的node_modules/antd/lib或node_modules/antd/es文件夹加载 CSS。优点是您将只导入需要的内容。缺点是您必须非常精细地导入。这意味着，您必须手动导入每个组件所需的样式，因为在初始页面加载时，服务器不会处理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导入；但是，您仍然需要导入整个 ant-design CSS 库。因此，缺点是您的生产版本将有一个相当大的 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

mattcarlotta 于 2020-04-23

👍3

在我看来，将antd与@ant-design/pro-layout一起使用的最佳方法之一就是将所有.css文件重命名为.less 。 LESS 向后兼容 CSS。通过这种方式，你不需要破解你的 babel 配置。这是一种简单且不易破解的方法。

如果您需要NextJS + antd + @ant-design/pro-layout示例，您可以查看： https : .css文件使用.less扩展名）

pahaz 于 2020-04-24

@pahaz您的示例无法为生产构建。

mattcarlotta 于 2020-04-24

@mattcarlotta能否请您解释一下您的设置。
我添加了 CI 操作来测试构建。节点 v10 和节点 v12 的 CI 测试
https://github.com/8iq/nodejs-hackathon-boilerplate-starter-kit/runs/615670863

pahaz 于 2020-04-24

@pahaz抱歉，这是用户错误。虽然这种方法有效，但不幸的是，对于使用 Sass 的预先存在的项目来说，它不是很灵活。也就是说，鼓励开发人员采用less不是css导入只是原始问题的另一种解决方法：无法从 node_modules 导入 CSS。

关于这一点，有一个官方的with-ant-design-less示例，它实现了与您的示例类似的结果。

也许您可能想向 Vercel 提交一个使用@ant-design/pro-layout包的示例。

mattcarlotta 于 2020-04-24

如果 Vercel 的任何人对该示例感兴趣，我将创建一个 PR。

pahaz 于 2020-04-24

👍5

如果 Vercel 的任何人对该示例感兴趣，我将创建一个 PR。

请，我要。

thiagoteles 于 2020-04-24

👍1

在我看来，将antd与@ant-design/pro-layout一起使用的最佳方法之一就是将所有.css文件重命名为.less 。 LESS 向后兼容 CSS。通过这种方式，你不需要破解你的 babel 配置。这是一种简单且不易破解的方法。
如果您需要NextJS + antd + @ant-design/pro-layout示例，您可以查看： https : .css文件使用.less扩展名）

如果您对所有内容使用 less ，它会修改相同类名的全局样式，以避免您可以启用 css 模块并编写 css 文件。

我在这里准备了更少的 repo， https://github.com/mit123suki/next-ant-less.git

mit123suki 于 2020-04-26

对于仍然感兴趣的任何人，请查看以下存储库

接下来使用 Ant-LESS
https://github.com/mit123suki/next-ant-less

接下来使用 Ant-CSS
https://github.com/mit123suki/next-ant-css

mit123suki 于 2020-04-26

❤2

@mit123suki你能解释一下，你的例子和官方例子有什么区别？

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

pahaz 于 2020-04-26

@mit123suki你能解释一下，你的例子和官方例子有什么区别？
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 语言环境替换，当使用日期选择器使用 dayjs 插件减少 antd 捆绑包时
使用重载的 cssvars.css 文件启用本地模块，以便变量直接在 css 模块中可用。

总的来说，它导致应用程序包大小的减少和样式的正确加载。您可以进行纱线分析并比较结果。

mit123suki 于 2020-04-26

@mit123suki此行是否导入所有样式？仅在 javascript 中使用 esm 进行摇树？

judewang 于 2020-04-27

👍1

@mit123suki此行是否导入所有样式？仅在 javascript 中使用 esm 进行摇树？
您可以删除该行并将 babelrc import antd 样式更改为 true。它的工作原理是一样的，除了我们现在有一个冲突顺序 b/w 组件样式

是的，仅适用于 javascript 文件，您可以使用 purgecss 但这破坏了样式

mit123suki 于 2020-04-27

😕2

@mit123suki你能解释一下，你的例子和官方例子有什么区别？
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 语言环境替换，当使用日期选择器使用 dayjs 插件减少 antd 捆绑包时
使用重载的 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 于 2020-04-30

@2huBrulee我忘了添加到 esm 来启动脚本。拉取最新代码。如果没有提交问题，那应该可以修复错误。谢谢

mit123suki 于 2020-04-30

@2huBrulee那是哪个

从你的“少”回购，我做到了：
纱
纱线构建

并得到了那个错误

2huBrulee 于 2020-04-30

@Timer , #11837 似乎在使用 css 而不是更少。这个问题可能更广泛。

kachkaev 于 2020-05-02

>对于仍然感兴趣的任何人，请查看以下存储库

接下来使用 Ant-LESS
https://github.com/mit123suki/next-ant-less
接下来使用 Ant-CSS
https://github.com/mit123suki/next-ant-css

@mit123suki嘿，这在本地主机上完美运行，谢谢！但是当我尝试将它部署到 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
找不到模块：无法解析“/zeit/68a93b6e/pages”中的“../components/Signin”
16:47:33.623
发生构建错误
16:47:33.623
错误：> 由于 webpack 错误，构建失败
16:47:33.623
在构建 (/zeit/68a93b6e/node_modules/next/dist/build/index.js:13:900)
16:47:33.733
错误命令失败，退出代码为 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感谢您的回复。是的，对我不好。我注意到我在导入中有错别字。奇怪的是它在本地主机上工作。

RiatIO 于 2020-05-10

@RiatIO请在我的 repo 中打开一个问题。顺便说一句，我最近更新了 repos。因此，如果您还没有拉取最新代码，请查看问题是否仍然存在。谢谢。对于任何对 repos 有问题的人，请在那里提交问题，而不是在这里。保持这个线程干净，谢谢。

mit123suki 于 2020-05-10

我的解决方案：

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 于 2020-05-20

@mcyleung介意分享您的配置吗？
我正在使用with-ant-design-less示例配置和@i-tengfei 解决方案，但我仍然遇到同样的问题

xedef 于 2020-05-20

@xedef哪个问题？

chemicalkosek 于 2020-05-21

我已经尝试将https://github.com/vercel/next.js/tree/canary/examples/with-ant-design-less作为样板并将其推送到 Heroku。我得到了一些非常低的 Lighthouse 分数，其中两个推荐的解决方案几乎导致了 CSS。

推荐的解决方案：

删除了未使用的 CSS（我认为这是因为导入了 antd 的整个 CSS）
缩小 CSS（这是我不确定的）

有人可以帮我吗？

raindecastro 于 2020-05-31

@raindecastro Ant-design 通过在导入组件时导入所有必要的 CSS 来工作。因此，如果您传入一个改变其外观的选项——比如向Select添加mode="multiple"选项——那么 CSS 将已经被包含在内。不幸的是，这具有导入可能未使用的其他 CSS 的sideEffect 。

更大的问题是 ant-design 不是一个小库（解压后为48.3 MB ，打包后大约为1.5MB+ ），并且有很多依赖项。因此，在使用它时，预计会出现较低的灯塔分数。这是我慢慢从 ant-design 迁移到直接使用他们的react 组件 (rc)依赖项或者最近设计我自己的 UI 组件的主要原因之一。

看看这些with-ant-design-less开箱即用的块图：
Ant-design 占3.11MB 的 2.13MB （已解析）

但是……您可以做两件事来减少捆绑包的大小：

1.) 删除moment语言环境：
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`),
};

icon/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";

下一个.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 仍然占2.11MB 的 1.2MB （解析）

mattcarlotta 于 2020-05-31

👍1

@mattcarlotta首先，谢谢！这是我从此类问题中得到的最深入的答案之一！话虽如此，尽管 antd 是我最喜欢的组件库之一，但开箱即用的优化似乎是一个很大的缺点。我将首先尝试您的两个 recos 以减少包大小，然后从那里查看性能分数，希望它会稍微改变一点。虽然如果它仍然感觉很慢，我想是时候寻找另一种选择了。你介意我给你发一封电子邮件吗？有一些我想验证的东西，我不想过度使用这个线程。

raindecastro 于 2020-05-31

我现在只用 rsuite

coderdix 于 2020-10-30

Next.js: 为新的 CSS 支持更新 Ant 设计示例 (9.2)

导入 ant-design 库抛出错误

最有用的评论

所有73条评论

结果

相关问题