react安装postcss-pxtorem

需求

在react项目中安装插件,实现按照设计图中的标注输入px,自动转换成rem。

基本情况

1、create-react-app 创建项目;
2、npm run eject 变成自定义配置的模式

配置postcss-pxtorem

1、安装插件:npm install postcss-pxtorem --save-dev
2、打开文件:webpack.config.dev.js
3、修改配置,见以下代码
4、index.html页面配置

注: eject成为自定义配置以后,这段代码摘自 webpack.config.dev.js 文件,*标注部分是本次配置 pxtorem 所做的更改。

//修改配置
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // 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,
          }),
          /*****************************************/
          require('postcss-pxtorem')({
            rootValue: 100,
            propWhiteList: [],
            minPixelValue:2,
          })
          /*****************************************/
        ],
      },
    },
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};

index.html页面配置,加在head标签里,这段是个人一直在用的rem计算代码,mark一下,代码以 750px的设计稿为基准,可根据自身情况变更

    <title>React App</title>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>

如图,配置成功
配置pxtorem后的项目

代码

稍微说下我的理解,因为找不到什么资料,所以我的理解只是来自于现象,rootValue 代表的字根,可以理解为一个除数,假如有个width:750px在px转换rem的计算中,会自动750px/rootValue,从而得到页面style上的7.5rem,然后根据js计算出的根字号,7.5rem*根字号,最后得到元素的对应值

最后,这个其实就是省掉了自己计算rem的步骤而已。。。

参考:
postcss-pxtorem
js实现rem自动匹配计算font-size的示例

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React应用中使用`postcss-pxtorem`是为了将设计稿中的像素值转换为相对单位(如rem),这样可以在不同屏幕尺寸上保持良好的响应式设计。以下是一个简单的示例,展示如何在React项目中设置和使用`postcss-pxtorem`: 首先,你需要安装`postcss`, `postcss-loader`, 和 `postcss-pxtorem` 这些依赖。在你的项目目录下,打开命令行并运行: ```bash npm install --save-dev postcss postcss-loader postcss-pxtorem ``` 然后,在`webpack.config.js`或`.babelrc`文件中配置PostCSS和`postcss-pxtorem`: **webpack.config.js** ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-pxtorem plugins: () => [require('postcss-pxtorem')({ rootValue: 100, // 根元素的font-size,默认100px propList: ['*'], // 应用转换的CSS属性,默认除了user-select等 unitPrecision: 5, // 小数位数,默认5 minPixelValue: 1, // 像素值的最小值,默认1 })] } } ] } ] } }; ``` **.babelrc** (如果使用Babel) ```json { "plugins": ["postcss"], "presets": ["@babel/preset-env"] } ``` 以上配置会在处理`.css`文件时自动应用`postcss-pxtorem`插件。 接下来,你可以创建一个`.scss` 或 `.css` 文件,并使用像素单位(如`px`)编写样式: ```scss body { font-size: 16px; /* 这会被转换为 rem 格式 */ padding: 20px; } ``` 现在,当浏览器加载时,这些像素值会被转换成相对于根元素字体大小(通常设置为100px)的rem值。如果你有任何CSS文件中使用了px,它们也会被相应地转换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值