React如何引入antd-mobile和postcss搭建移动端

这篇“React如何引入antd-mobile和postCSS搭建移动端”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React如何引入antd-mobile和postcss搭建移动端”文章吧。

安装antd-mobile

全局引入

npm install antd-mobile --save

在App.js引入css

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

在jsx使用antd组件

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

按需引入

npm install babel-plugin-import -s

安装插件，覆盖webpack配置

customize-cra配置api文档

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

package.JSON进行更改命令方式

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

在根目录新建config-overrides.js

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

在App.js删除之前引入的css
校验是否按需引入

引入postcss px转rem

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

index.js导入

import 'lib-flexible'

修改config-overrides.js文件

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, //设计图大小                    remPrecision: 2, //只转换到两位小数                    exclude: /node_modules/i //插件不需要转rem                }            )        ]    ),    addWebpackAlias({        "@": path.resolve(__dirname, "src")    }));

如果你需要使用less
/
自定义主题

npm install less less-loader -s

如果项目启动报错,是因为less-loader版本过高，需要卸载，安装低版本

npm install less-loader@5.0.0 -s

坑！ 需要注意顺序

const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra');const path = require("path");module.exports = override(    fixBabelImports('import', {        libraryName: 'antd-mobile',        style: true, //默认为'css'    }),    addLessLoader({        javascriptEnabled: true,        modifyVars: { "@brand-primary": "#1DA57A" }, //自定义主题    }),    addPostcssPlugins(        [require("postcss-px2rem-exclude")            (                {                    remUnit: 75, //设计图大小                    remPrecision: 2, //只转换到两位小数                    exclude: /node_modules/i //插件不需要转rem                }            )        ]    ),    addWebpackAlias({        "@": path.resolve(__dirname, "src")    }));

补充：解决react项目引入antd-mobile导致postcss配置px转rem失效问题

解决方案：在config-overrides.js文件里重写postcss，加入如下代码
npm下载以下模块

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(  // 配置按需加载  fixBabelImports("import", {    libraryName: "antd-mobile",    style: "css",  }),  // 配置文件别名  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) => {    // 重写postcss    rewirePostcss(config, {      plugins: () => [        require("postcss-flexbugs-fixes"),        require("postcss-preset-env")({          autoprefixer: {            flexbox: "no-2009",          },          stage: 3,        }),        require("postcss-px2rem-exclude")({          // 设计稿宽度/10          remUnit: 1080 / 10,          exclude: /node-modules/i,        }),      ],    });    return config;  });

以上就是关于“React如何引入antd-mobile和postcss搭建移动端”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。