移动端的React项目中如何配置自适应和px转rem

创建项目

create-react-app project-name

启动项目

npm start

下载自适应和px转rem的插件

自适应的：    npm install lib-flexible --save

px转rem的：npm install postcss-pxtorem@5.1.1 --save-dev

创建craco.config.js配置文件

在package.json中配置craco

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }

在craco.config.js文件中配置 postcss-pxtorem

const path = require('path')

module.exports = {
  // 配置@符号的
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  style: {
    // 配置postcss-pxtorem
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            [
              'postcss-pxtorem',
              {
                rootValue: 375 / 10, // 根元素字体大小
                // propList: ['width', 'height']
                propList: ['*']
              },
            ],
          ],
        },
      },
    },
  },
}

原文地址：https://blog.csdn.net/xxq_0217/article/details/136393977

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！