部署后未加载 Ant Design答案

【问题标题】：Ant Design not loaded after deployment部署后未加载 Ant Design
【发布时间】：2021-06-10 16:33:18
【问题描述】：

我构建了一个 react 项目，应用了 ant 设计，官方文档为 react-app-rewired。在yarn start 之后，css 被很好地加载，但在yarn build 之后没有加载。我使用 Docker 和 Nginx 进行部署。其他组件运行良好，但只有蚂蚁设计被破坏并出现在屏幕上。

config-overrides.js

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noImplicitAny": false,
        "charset": "utf8"
    },
    "include": ["src"],
    "exclude": ["./node_modules/**/*"]
}

package.json

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
...
"devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.8"
  }
...

Dockerfile

FROM node:12 as builder
RUN mkdir /app
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package*.json ./
COPY ./yarn.lock ./

RUN apt-get update
RUN apt install yarn -y
RUN yarn global add react-scripts@4.0.2
RUN yarn install
COPY . .
RUN yarn run build

# Production build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

【问题讨论】：

标签： reactjs docker antd ant-design-pro

【解决方案1】：

这是 Nginx 的问题。我使用 Nginx docker 容器来部署带有自定义 nginx.conf 的 React 构建项目。它无法通过在配置中添加 include mime.types 来提供具有 mime 类型的 css 文件。

worker_processes auto;

events { worker_connections 1024; }

http {

  include mime.types; # MUST BE ADDED
  sendfile on;

  server {
    listen 80;

【讨论】：