react 项目搭建适配 rem

2021-04-23 16:32:47 阅读：246 来源： 互联网

标签：package 适配 require postcss js react rem PostCSS pxtorem

第一步：

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

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

标签：package,适配,require,postcss,js,react,rem,PostCSS,pxtorem
来源： https://www.cnblogs.com/fyh0912/p/14694478.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react 项目 搭建 适配 rem

react 项目搭建适配 rem