React introduces antd-mobile+postcss to build mobile terminal

Install antd-mobile

Global import

npm install antd-mobile --save

Import css in App.js

import 'antd-mobile/dist/antd-mobile.css';

Using antd components in jsx

import React from 'react';
import { Button } from 'antd-mobile';
const index = () => {
    return (
        <div>
            <Button type="primary">primary</Button>
        </div>
    );
}

export default index;

Import on demand

npm install babel-plugin-import -s

Install plugins and override webpack configuration

customize-cra configuration api documentation

npm install react-app-rewired customize-cra -s

Command method for changing package.json

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

Create a new config-overrides.js in the root directory

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
);

Delete the css introduced before in App.js
Verify whether it is imported on demand

insert image description here

Introducing postcss px to rem

npm install lib-flexible postcss-px2rem-exclude --save

Import index.js

import 'lib-flexible'

Modify config-overrides.js file

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require('customize-cra');
const path = require("path");
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
    addPostcssPlugins(
        [require("postcss-px2rem-exclude")
            (
                {
                    remUnit: 75, //Design size remPrecision: 2, //Convert only to two decimal places exclude: /node_modules/i //Plugins do not need to convert to rem
                }
            )
        ]
    ),
    addWebpackAlias({
        "@": path.resolve(__dirname, "src")
    })
);

If you need to use less
/
Customize the theme

npm install less less-loader -s

If the project starts with an error, it is because less-loader version is too high. You need to uninstall it and install a lower version.

npm install [email protected] -s

pit! Need to pay attention to the order

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra');
const path = require("path");
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true, //Default is 'css'
    }),

    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { "@brand-primary": "#1DA57A" }, //Custom theme}),

    addPostcssPlugins(
        [require("postcss-px2rem-exclude")
            (
                {
                    remUnit: 75, //Design size remPrecision: 2, //Convert only to two decimal places exclude: /node_modules/i //Plugins do not need to convert to rem
                }
            )
        ]
    ),

    addWebpackAlias({
        "@": path.resolve(__dirname, "src")
    })
);

Supplement: Solve the problem that the postcss configuration px to rem conversion fails due to the introduction of antd-mobile in the react project

Today I used antd-mobile and found that the postcss I configured before was invalid. To prevent the next pitfall, I will record the solution: rewrite postcss in the config-overrides.js file and add the following code
npm downloads the following modules

npm i react-app-rewire-postcss postcss-px2rem-exclude -S

const {
  override,
  fixBabelImports,
  addWebpackAlias,
  addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
module.exports = override(
  //Configure on-demand loading fixBabelImports("import", {
    libraryName: "antd-mobile",
    style: "css",
  }),
  //Configuration file aliasaddWebpackAlias({
    "@": path.resolve(__dirname, "src"),
    "@scss": path.resolve(__dirname, "src/assets/scss"),
    "@images": path.resolve(__dirname, "src/assets/images"),
    "@views": path.resolve(__dirname, "src/views"),
    "@network": path.resolve(__dirname, "src/network"),
    "@store": path.resolve(__dirname, "src/store"),
    "@components": path.resolve(__dirname, "src/components"),
  }),
  addDecoratorsLegacy(),
  (config, env) => {
    // Rewrite postcss
    rewirePostcss(config, {
      plugins: () => [
        require("postcss-flexbugs-fixes"),
        require("postcss-preset-env")({
          autoprefixer: {
            flexbox: "no-2009",
          },
          stage: 3,
        }),
        require("postcss-px2rem-exclude")({
          // Design draft width/10
          remUnit: 1080 / 10,
          exclude: /node-modules/i,
        }),
      ],
    });
    return config;
  }
);

The above is the details of using React to build a mobile terminal using antd-mobile+postcss. For more information about building a mobile terminal using React, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: