Как использовать Ant Design в рендеринге на стороне сервера?

Question

Как использовать Ant Design в рендеринге на стороне сервера?

Я хочу использовать муравьиный дизайн в проекте приложения для рендеринга на стороне сервера. Как импортировать ant d при рендеринге на стороне сервера?

import {
  Icon, Form, Input, Button, Upload, Select, Badge,
  Avatar, Divider, Checkbox, DatePicker, Row, Col, Carousel 
} from 'antd';

4

reactjs antd

Источник

user8918509 23 апр '18 в 11:08

3 ответа

Другие вопросы по тегам reactjs antd

user3040605 23 апр '18 в 13:55 2018-04-23 13:55 · Answer 1 · 2018-04-23 13:55

Проверьте пример next.js с ant-design: https://github.com/zeit/next.js/tree/canary/examples/with-ant-design

1

Источник

user3040605 23 апр '18 в 13:55

user9955460 18 дек '18 в 16:01 2018-12-18 16:01 · Answer 2 · 2018-12-18 16:01

Вы можете просто импортировать CSS из локального пути, если у вас есть или с помощью CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.11.2/antd.css">

с импортом ничего не меняется

Редактировать:

Если вы хотите переопределить несколько переменных меньше, я использую lessc и собираю css из ant less, поэтому в package.json есть скрипт

"build:antd": "lessc --js --modify-var=@layout-body-background=#ffffff ./node_modules/antd/dist/antd.less > dist/ant.css",

и запустить его:

npm run build:antd

затем импортировать этот CSS в HTML

user5672577 21 июн '23 в 07:30 2023-06-21 07:30 · Answer 3 · 2023-06-21 07:30

Согласно новой документации. Поддержка SSR (серверный рендеринг) все еще находится на начальной стадии.

Next.js

Использование antd-mobile в Next.js требует дополнительной настройки.

Следующий.js 12

Сначала вам нужно установить модули next-transpile:

      $ npm install --save-dev next-transpile-modules
# or
$ yarn add -D next-transpile-modules
# or
$ pnpm add -D next-transpile-modules

Затем настройте его в next.config.js:

      const withTM = require('next-transpile-modules')([
  'antd-mobile',
]);

module.exports = withTM({
  // other Next.js configuration in your project
});

Следующий.js 13

Next.js 13 может автоматически транспилировать и объединять зависимости из внешних зависимостей (node_modules). Это заменяет пакет next-transpile-modules.

          // next.config.js
    const nextConfig = {
      transpilePackages: ['antd-mobile'],
    };

    module.exports = nextConfig;

Чтобы использовать antd-mobile в каталоге приложения, добавьте директиву use client в верхней части файла.

      // app/page.jsx
'use client'

import { Button } from 'antd-mobile'

Пожалуйста, посетите страницу ниже для получения более подробной информации https://mobile.ant.design/guide/ssr/