博客 / 詳情

返回

(移動端適配px轉rem)react配置rem插件lib-flexible和postcss-px2rem-exclude

1、安裝插件

yarn add lib-flexible postcss-px2rem-exclude

//這個插件也要下,不然的話啓動項目的時候會報錯
yarn add react-app-rewire-postcss

2、修改config-overrides.js(如果沒有就新建,在項目根目錄) 在config-overrides.js文件裏重寫postcss,加入如下代碼
這文件將antd-mobile的配置合併起來了,如果你用了antd-mobile的按需引入,那直接粘貼過去就ok,antd-mobile按需引入參照官網https://mobile.ant.design/doc...

const {
    override,
    fixBabelImports,
    addWebpackAlias,
    addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem-exclude");
module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd-mobile",
        style: "css",
    }),
    addWebpackAlias({
        "@": path.resolve(__dirname, "src"),
    }),
    addDecoratorsLegacy(),
    (config, env) => {
        // 重寫postcss
        rewirePostcss(config, {
            plugins: () => [
                require("postcss-flexbugs-fixes"),
                require("postcss-preset-env")({
                    autoprefixer: {
                        flexbox: "no-2009",
                    },
                    stage: 3,
                }),
                //關鍵:設置px2rem
                px2rem({
                    remUnit: 37.5,//這裏最開始寫的是75,但是antd的樣式變的可小,查詢後看人家設置的是37.5,然後試了下確實好了
                    exclude: /node-modules/i,
                }),
            ],
        });

        return config;
    }
);

3、入口文件index.js 中引入lib-flexible
import "lib-flexible"

4、最後一步修改index.html

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
user avatar laughingzhu 頭像 moon_glade 頭像 peter-wilson 頭像 jidongdehai_co4lxh 頭像 tigerandflower 頭像 _raymond 頭像 columsys 頭像 ailim 頭像 mulander 頭像 nanian_5cd6881d3cc98 頭像 niumingxin 頭像 light_5cfbb652e97ce 頭像
40 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.