React 中使用 Ant Design 和 PostCSS-px-to-viewport 的指南

在 React 中使用 Ant Design 和 PostCSS-px-to-viewport 的用法，需要以下几个步骤：

1. 安装依赖：在项目根目录下运行以下命令安装 Ant Design 和 PostCSS-px-to-viewport：

npm install antd postcss-px-to-viewport --save

2. 配置 PostCSS-px-to-viewport：在项目根目录下创建 postcss.config.js 文件，并添加以下代码：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      viewportHeight: 1334, // 设计稿高度，可以不指定
      unitPrecision: 3, // px 转 vw 的小数位数
      viewportUnit: 'vw', // 转换后的单位
      selectorBlackList: ['.ignore'], // 要忽略的选择器，保留 px 单位
      minPixelValue: 1, // 最小转换单位，小于 1px 不转换
      mediaQuery: false // 是否在媒体查询中转换
    }
  }
}

3. 修改 Webpack 配置：在项目的 Webpack 配置文件中添加对 PostCSS 的使用。如果使用 create-react-app 脚手架创建的项目，可以通过 eject 暴露 Webpack 配置文件，然后修改 webpack.config.js 文件；如果使用的是 Umi 或 Dva 等框架，可以在相应的配置文件中修改。

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-px-to-viewport')({
                  viewportWidth: 750, // 设计稿宽度
                  viewportHeight: 1334, // 设计稿高度，可以不指定
                  unitPrecision: 3, // px 转 vw 的小数位数
                  viewportUnit: 'vw', // 转换后的单位
                  selectorBlackList: ['.ignore'], // 要忽略的选择器，保留 px 单位
                  minPixelValue: 1, // 最小转换单位，小于 1px 不转换
                  mediaQuery: false // 是否在媒体查询中转换
                })
              ]
            }
          }
        ],
      },
      // ...
    ],
  },
  // ...
};

4. 使用 Ant Design 组件：在需要使用 Ant Design 组件的地方导入，并使用。例如，在 App.js 中使用 Button 组件：

import React from 'react';
import { Button } from 'antd';

function App() {
  return (
    <div>
      <Button type='primary'>Primary Button</Button>
    </div>
  );
}

export default App;

这样就可以在 React 中使用 Ant Design 和 PostCSS-px-to-viewport 了。注意在使用 Ant Design 组件时，需要在 index.js 文件中引入 Ant Design 的样式文件：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css'; // 引入 Ant Design 样式
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

这样就完成了 Ant Design 和 PostCSS-px-to-viewport 的配置和使用。