How to introduce antd-mobile+postcss into React to build Mobile Terminal

This article mainly explains "how to introduce antd-mobile+postcss into React to build mobile terminal". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how React introduces antd-mobile+postcss to build a mobile terminal.

Install antd-mobile

Global introduction of npm install antd-mobile-save

Introduction of 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 (primary);} export default index; introduces npm install babel-plugin-import-s on demand

Install plug-ins to override webpack configuration

Customize-cra configuration api documentation

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

Package.json changes the mode of command

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

Create a config-overrides.js in the root directory

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

Css introduced before App.js deletion

Check whether it is introduced on demand

Introducing postcss px to remnpm install lib-flexible postcss-px2rem-exclude-- save

Index.js Import

Import 'lib-flexible'

Modify the 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) / / only convert to two decimal places exclude: / node_modules/i / / plug-ins do not need to transfer rem})], addWebpackAlias ({"@": path.resolve (_ _ dirname, "src")})

If you need to use less

/

Custom theme

Npm install less less-loader-s

If the project starts up with an error, it is because the less-loader version is too high and needs to be uninstalled and installed.

Npm install less-loader@5.0.0-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 ('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) / / only convert to two decimal places exclude: / node_modules/i / / plug-ins do not need to transfer rem})], addWebpackAlias ({"@": path.resolve (_ _ dirname, "src")})

Add: solve the failure problem of postcss configuration px to rem caused by the introduction of antd-mobile in react project

After using antd-mobile today, I found that my previously configured postcss is invalid. To prevent the next step, record the solution.

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-Sconst {override, fixBabelImports, addWebpackAlias, addDecoratorsLegacy,} = require ("customize-cra"); const path = require ("path"); const rewirePostcss = require ("react-app-rewire-postcss") Module.exports = override (/ / configure demand loading fixBabelImports ("import", {libraryName: "antd-mobile", style: "css",}), / / configuration file alias addWebpackAlias ({"@": 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 width / 10 remUnit: 1080 / 10 Exclude: / node-modules/i,}),],}) Return config;}). At this point, I believe you have a better understanding of "how React introduces antd-mobile+postcss to build mobile terminal". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!