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")
    })
);