NextJS 引入移动端适配库postcss-pxtorem

llight
2,406 阅读1分钟 
if (你的英文水平足够好) {
    [阅读NextJS官方文档](https://www.nextjs.cn/docs/advanced-features/customizing-postcss-config)
} else {
    继续往下读
}

一、安装库

yarn add amfe-flexible
yarn add -D postcss-pxtorem

二、在项目根目录创建postcss.config.js文件

//postcss.config.js

module.exports = {
  plugins: { 
    'postcss-pxtorem': {
      rootValue: 1080 / 10,  // 1080px为设计稿大小
      unitPrecision: 5,
      propList: ["*"],
      selectorBlackList: [/^.html/], //排除html样式
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

三、在项目根目录下的next.config.js文件添加配置

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

四、在_app.tsx(NextJS14中是layout.tsx)中引入引用amfe-flexible

因为amfe-flexible中使用了window对象，不能直接import

dynamic(() => import("amfe-flexible"), {
  ssr: false,
});


function app() {
    return (
        <div>
            <Head>
                <meta name="renderer" content="webkit" />
                <title>title</title>
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></meta>
                <link rel="icon" type="image/x-icon" href="/favicon.ico" />
            </Head>

        </div>)
}

注意这条一定要加上:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></meta>
avatar
文章
阅读
粉丝