Ant 设计页面重新加载 css 渲染延迟 [英] Ant design page reloading css rendering delay

问题描述

我将我的 React TypeScript 项目用于 ant-design，我有当我重新加载页面时出现了一些问题，css 加载延迟，这是什么原因?

我将我的 main.css 导入到

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

解决方案

其实是基于和Design Doc 关于开始，你可以使用 babel plugin 来自动加载使用像下面这样的组件，这是一种推荐方式:

//.babelrc 或 babel-loader 选项{插件":[["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]//`style: true` for less]}

通过使用这种方式(来自文档):

<块引用>

这样就可以从 antd 中导入组件，而无需手动导入相应的样式表.antd babel 插件会自动导入样式表.

因此您可以轻松导入组件，无需手动加载 CSS，如下所示:

import { Button } from 'antd';

但是如果你不想使用上面的插件，你可以使用 Ant Desing 组件，通过在每个组件中导入它的 CSS 如下:

从'react'导入React；从'antd/es/button'导入按钮；导入 'antd/es/button/style/css';//<<==== 这样导入'./CustomButton.css';const CustomButton = () =>(<div className="自定义按钮"><按钮类型="主要">按钮</按钮>

);

还有另一种方法，使用您自己的 CSS 或 SCSS 或 LESS，但在您的组件 CSS 系统顶部导入组件 CSS，就像下面的文档一样:

//自定义组件从反应"导入反应；从'antd/es/button'导入按钮；导入'./CustomButton.css';const CustomButton = () =>(<div className="自定义按钮"><按钮类型="主要">按钮</按钮>

);

//CustomButton.css 文件@import '~antd/es/button/style/css';.自定义按钮{背景颜色:红色；//例如}

此外，您可以使用整个 Ant Design CSS，而不是单独使用每个组件.我的意思是:

import 'antd/dist/antd.css';

取而代之的是:

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

对于这种加载 CSS 的方式，最好在项目的根目录或 CSS 系统中导入一次.

提示:我更喜欢第一种，使用 babel 插件，更安全，更清晰，更易读.

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'; 

解决方案

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.

这篇关于Ant 设计页面重新加载 css 渲染延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！