欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React引入antd-mobile+postcss搭建移动端

程序员文章站 2022-07-08 08:14:44
安装antd-mobile全局引入npm install antd-mobile --save在app.js引入cssimport 'antd-mobile/dist/antd-mobile.css'...

安装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配置

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
校验是否按需引入

React引入antd-mobile+postcss搭建移动端

引入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失效问题

今天使用了一下antd-mobile发现我之前配置的postcss失效了,防止下次踩坑记录一下解决方案
解决方案:在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搭建移动端的详细内容,更多关于react搭建移动端的资料请关注其它相关文章!