react-9-antd

1. 使用antd的时候会报一个css的错

Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported

Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported

解决办法：

// 不要这样引入antd的css文件
// import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

// 在最顶层的css文件中，这样引入css文件即可(如 App.css)
@import '~antd/dist/antd.css';

2. antd 组件的样式按需引入

1. 安装依赖

npm install react-app-rewired
npm install customize-cra
npm install babel-plugin-import

2. 修改 package.json 文件的配置

"scripts":{
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

2. 在与 src 平级的目录下新建 config-overrides.js

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

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

参考文章：(1条消息) react antd 全局引入 按需引入_ccccc-的博客-CSDN博客_antd全局引入

3. 配置后台布局

const Home = () => (
  <Layout style={{ minHeight: "100vh" }}>
    <Header
      style={{
        position: "fixed",
        zIndex: 1,
        width: "100%"
      }}
    >
     <!-- 头部区域内容 -->
    </Header>
    <Layout>
      <Sider
        width={200}
        style={{
          overflow: "auto",
          position: "fixed",
          left: 0,
          top: 64,
          bottom: 0,
          overflow: "hidden"
        }}
      >
       <!-- 侧边栏区域内容 -->
      </Sider>
      <Layout
        style={{
          marginTop: "64px",
          padding: "24px",
          marginLeft: 200,
          height: "100%"
        }}
      >
        <Content
          style={{
            margin: "24px 16px 0",
            overflow: "initial"
          }}
        >
          <!-- 主要内容区域 -->
        </Content>
      </Layout>
    </Layout>
  </Layout>
)