Ant design page reloading css rendering delay

问题

I used my react TypeScript project for ant-design, I have some issue when I reload the page, css loading delay, any reason for this?

I imported my main.css to

@import './../node_modules/antd/dist/antd.css';

回答1:

Actually, based on And Design Doc about getting a start, You could use babel plugin for automatic loading used components like below, it is a recommended way:

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
  ]
}

By using this way (from docs):

This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.

So you can import the component easily and there is no need to load CSS manually, just like below:

import { Button } from 'antd';

But if you don't want to use the above plugin, you can use Ant Desing component by importing its CSS inside each component like below:

import React from 'react';
import Button from 'antd/es/button';
import 'antd/es/button/style/css'; // <<=== this way
import './CustomButton.css';

const CustomButton = () => (
  <div className="custom-button">
    <Button type="primary">
      Button
    </Button>
  </div>
);

And there is another way, use your own CSS or SCSS or LESS, but import the component CSS at the top of your component CSS system, just like below exactly like docs:

// the custom component
import React from 'react';
import Button from 'antd/es/button';
import './CustomButton.css';

const CustomButton = () => (
  <div className="custom-button">
    <Button type="primary">
      Button
    </Button>
  </div>
);

// the CustomButton.css file
@import '~antd/es/button/style/css';

.custom-button {
  background-color: red; // for example
}

Also, you can use the whole Ant Design CSS instead of using separately each component. I mean this:

import 'antd/dist/antd.css';

Instead of this:

import 'antd/es/button/style/css';

For this way of loading CSS, it is better to import it once at the root of the project or the CSS system.

HINT: I prefer the first, using babel plugin, it is safe, more clear and more readable.

回答2:

Replace

@import './../node_modules/antd/dist/antd.css';

with

@import '~antd/dist/antd.css';

This is given in the documentation you linked.

来源：https://stackoverflow.com/questions/60398647/ant-design-page-reloading-css-rendering-delay

标签

reactjs

antd

react-typescript