react 项目 搭建 适配 rem

第一步   :

npm install lib-flexible postcss-pxtorem -S 

第二步:

运行指令展示出 webapck.config.js 文件

run eject

  运行出现报错问题时  :可以在项目文件夹里把 .git 删除掉,即可解决

第三步:

  在webpack.cocnfig.js 里面引入

const pxtorem = require('postcss-pxtorem');

  在webpack.config.js 找到下面代码的地方

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
    // 新增部分--------可不可以放在 postcssNormalize()下面,你可以自 己试试
            pxtorem({
              rootValue:37.5,
              propWhiteList:[],
              minPixelValue:2,
              exclude: /node_modules/i
            }),
    // ------------------
            postcssNormalize(),
            
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

第四步 :

保存完代码 启动项目

npm start

  然后接着报错

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

  这个问题是版本号过高, 你可修改  package.json

"postcss-pxtorem": "^6.0.0",  改成 "^5.1.1"

再次重新 下载依赖   npm i    

运行项目即可  亲身试验可行!!!

上一篇:react+lib-flexible适配浏览器宽度配置


下一篇:less&sass&postcss文档