React使用rem

1、安裝依賴包

npm install lib-flexible --save
npm install postcss-px2rem --save

2、配置
  • 導(dǎo)出 webpack 配置文件 :
    npm run eject
  • 修改config/webpack.config.js
    引入模塊 : const px2rem = require('postcss-px2rem')
    添加配置 : px2rem({ remUnit: 37.5 })
    如下所示:
const px2rem = require('postcss-px2rem')
{
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009'
              },
              stage: 3
            }),
            px2rem({ remUnit: 37.5 }),   //  添加的代碼
            postcssNormalize()
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap
        }
      }
3、在入口文件 index.js 里引入 lib-flexible

import 'lib-flexible'

4、重新運(yùn)行項(xiàng)目

npm start

演示效果:


image.png

參考博客:
https://www.cnblogs.com/yinhao-jack/p/13253603.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容