我将我的 React TypeScript 项目用于ant-design,当我重新加载页面时遇到了一些问题css loading delay
,有什么原因吗?
我导入了我main.css
的
@import './../node_modules/antd/dist/antd.css';
我将我的 React TypeScript 项目用于ant-design,当我重新加载页面时遇到了一些问题css loading delay
,有什么原因吗?
我导入了我main.css
的
@import './../node_modules/antd/dist/antd.css';
实际上,基于And Design Doc关于入门,您可以使用babel 插件来自动加载使用过的组件,如下所示,这是一种推荐的方法:
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
通过使用这种方式(来自文档):
这允许您从 antd 导入组件,而无需手动导入相应的样式表。antd babel 插件会自动导入样式表。
这样就可以轻松导入组件,无需手动加载 CSS,如下所示:
import { Button } from 'antd';
但是如果你不想使用上面的插件,你可以通过在每个组件中导入它的 CSS 来使用 Ant Desing 组件,如下所示:
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>
);
还有另一种方法,使用你自己的 CSS 或 SCSS 或 LESS,但在你的组件 CSS 系统顶部导入组件 CSS,就像下面的文档一样:
// 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
}
此外,您可以使用整个 Ant Design CSS 而不是单独使用每个组件。我的意思是:
import 'antd/dist/antd.css';
取而代之的是:
import 'antd/es/button/style/css';
对于这种加载 CSS 的方式,最好在项目的根目录或 CSS 系统中导入一次。
提示:我更喜欢第一种,使用babel 插件,它更安全、更清晰、更易读。
代替
@import './../node_modules/antd/dist/antd.css';
和
@import '~antd/dist/antd.css';
这在您链接的文档中给出。