蚂蚁设计页面重载css渲染延迟

Posted 2023-02-22

【中文标题】蚂蚁设计页面重载css渲染延迟

【英文标题】：Ant design page reloading css rendering delay

【发布时间】：2020-06-09 10:11:48

【问题描述】：

我将我的 react TypeScript 项目用于ant-design，我在重新加载页面时遇到了一些问题，css loading delay，有什么原因吗？

我将main.css 导入到

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

【参考方案1】：

其实，基于And Design Doc关于入门，你可以使用babel plugin来自动加载使用过的组件，如下所示，这是一个推荐的方式：

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

但是如果你不想使用上面的插件，你可以使用 Ant Desing 组件，方法是在每个组件中导入它的 CSS，如下所示：

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 plugin，它更安全、更清晰、更易读。

【参考方案2】：

替换

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

与

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

这在您链接的文档中给出。

【讨论】：

我用了这个，我在./main.css (../node_modules/css-loader/dist/cjs.js??ref--5-1!../node_modules/postcss-loader/src??postcss!./main.css) Module build failed (from ../node_modules/postcss-loader/src/index.js):得到了这个错误ERROR

您是否尝试删除您的 node_modules 文件夹并再次执行npm install？