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.jsonloader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https://github.com/facebook/create-react-app/issues/2677ident: '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>

如图，配置成功

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

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

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

react安装postcss-pxtorem相关推荐

Nodejs，Npm，React安装教程
React安装 1.下载node.js安装包下载二进制包选择比较稳定的版本进行安装,v8.9 2.安装直接把文件解压复制到某个目录下, sudo cp -r node-v8.9.0 /opt/n ...
react安装_「React实战」三分钟搭建React开发环境
其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...
react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
react安装_前端大牛进阶---gt;React必会教程
一.背景介绍01 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来 ...
React学习整理（一）：React 安装
官方提供的 CDN 地址: <script src="https://unpkg.com/react@16/umd/react.development.js">< ...
React 安装及创建项目
一.最熟悉的操作利用create-react-app搭建项目 1.全局安装create-react-app,执行:npm install -g create-react-app 命令进行安装 2.进入 ...
react安装react development tools插件(edge浏览器)
目录一下载二安装插件到egde浏览器 1 添加插件到浏览器 2 插件使用一下载 Download React Developer Tools 4.24.7 CRX File for Chr ...
react学习经验总结（react安装）
一.React 可以直接下载使用,下载包中也提供了很多学习的实例. 本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/ 下载最新版. 你也可以直接 ...
解决react安装CRA启动spawn cmd ENOENT报错问题
安装安装:npx create-react-app 启用:create-react-app 项目名称抽离webpack配置文件:yarn eject 启动启动:yarn start 报错: 上述 ...

react安装postcss-pxtorem

需求

基本情况

配置postcss-pxtorem

react安装postcss-pxtorem相关推荐

最新文章

热门文章