快捷導(dǎo)航

React引入antd-mobile+postcss搭建移動(dòng)端

更新時(shí)間：2021年06月20日 15:43:59 作者：明知山_

本文給大家分享React引入antd-mobile+postcss搭建移動(dòng)端的詳細(xì)流程，文末給大家分享我的一些經(jīng)驗(yàn)記錄使用antd-mobile時(shí)發(fā)現(xiàn)我之前配置的postcss失效了，防止大家踩坑，特此把解決方案分享到腳本之家平臺(tái)，需要的朋友參考下吧

安裝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進(jìn)行更改命令方式

 "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
校驗(yàn)是否按需引入

在這里插入圖片描述

引入postcss px轉(zhuǎn)rem

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

index.js導(dǎo)入

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, //設(shè)計(jì)圖大小
                    remPrecision: 2, //只轉(zhuǎn)換到兩位小數(shù)
                    exclude: /node_modules/i //插件不需要轉(zhuǎn)rem
                }
            )
        ]
    ),
    addWebpackAlias({
        "@": path.resolve(__dirname, "src")
    })
);

如果你需要使用less
/
自定義主題

npm install less less-loader -s

如果項(xiàng)目啟動(dòng)報(bào)錯(cuò),是因?yàn)?code>less-loader版本過(guò)高，需要卸載，安裝低版本

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, //默認(rèn)為'css'
    }),

    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { "@brand-primary": "#1DA57A" }, //自定義主題
    }),

    addPostcssPlugins(
        [require("postcss-px2rem-exclude")
            (
                {
                    remUnit: 75, //設(shè)計(jì)圖大小
                    remPrecision: 2, //只轉(zhuǎn)換到兩位小數(shù)
                    exclude: /node_modules/i //插件不需要轉(zhuǎn)rem
                }
            )
        ]
    ),

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

補(bǔ)充：解決react項(xiàng)目引入antd-mobile導(dǎo)致postcss配置px轉(zhuǎn)rem失效問(wèn)題

今天使用了一下antd-mobile發(fā)現(xiàn)我之前配置的postcss失效了，防止下次踩坑記錄一下解決方案
解決方案：在config-overrides.js文件里重寫(xiě)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) => {
    // 重寫(xiě)postcss
    rewirePostcss(config, {
      plugins: () => [
        require("postcss-flexbugs-fixes"),
        require("postcss-preset-env")({
          autoprefixer: {
            flexbox: "no-2009",
          },
          stage: 3,
        }),
        require("postcss-px2rem-exclude")({
          // 設(shè)計(jì)稿寬度/10
          remUnit: 1080 / 10,
          exclude: /node-modules/i,
        }),
      ],
    });
    return config;
  }
);

以上就是React引入antd-mobile+postcss搭建移動(dòng)端的詳細(xì)內(nèi)容，更多關(guān)于React搭建移動(dòng)端的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: