React

暴露webpack配置，即 react-scripts 包

npm run eject

⚠️ 在运行该命令的时候，要先将已经修改的文件提交到本地仓库中过，否则会报错！

安装项目项目需要的包 lib-flexible 、 postcss-px2rem 和 postcss-loader：

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

在项目的 public/index.html 入口文件添加

<meta name="viewport" content="width=device-width,inital-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

然后在项目入口文件 index.js 中引入 lib-flexible

import "lib-flexible" ;

5.接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem

const px2rem = require("postcss-px2rem");

i配置文件.png

在 webpack.config.js 的 postcss-loader loader里面添加：

{
        loader: require.resolve("postcss-loader"),
        options: {
          /* 省略代码... */
          plugins: () => [
            require( postcss-flexbugs-fixes ),
            require( postcss-preset-env )({
              autoprefixer: {
                flexbox:  no-2009 ,
              },
              stage: 3,
            }),
            px2rem({remUnit: 75}), // 添加的内容
            /* 省略代码... */
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

i配置.png

重新启动项目，发现里面的px单位都变成了rem

注意：使用 px2rem-loader 后再使用px上有些不同：
直接写 px ，编译后会直接转化成rem —— 除开下面两种情况，其他长度用这个
在 px 后面添加 /no/ ，不会转化 px，会原样输出。 —— 一般border需用这个
在 px 后面添加 /px/ ，会根据 dpr 的不同，生成三套代码。—— 一般字体需用这个,默认是@2x图 style

.App {
  .header {
    border: 10px solid #ddd; /*no*/
    color:#f00;
    font-size: 100px; /*px*/  
  }
}

Vue

vue项目配置px2rem

首先，我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目（前提是已经安装过 vue-cli，具体不再阐述），一些选项根据自己项目需要选择。

vue init webpack my-app

命令执行之后，会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录：

cd my-app

使用yarn 安装项目所需依赖后，安装 lib-flexible 和 px2rem-loader：

yarn add lib-flexible
yarn add px2rem-loader --dev

在入口页面 index.html 中设置``标签：

<meta name="viewport" content="width=device-width,inital-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

然后在项目入口文件 main.js 中引入 lib-flexible：

import "lib-flexible/flexible.js" ;

用 vue-cli3 创建的 vue 项目配置 px2rem-loader 如下：
找到文件 node_modules/@vue/cli-service/lib/config/css.js，在css loader之前添加规则，如下所示：

i图示.png

rule
    .use('px2rem-loader')
    .loader('px2rem-loader')
    .options({emUnit: 75})

最后，使用 yarn dev 重启项目，会发现自己设置的px被转为rem 了。

图示2.png

适用情况 & 不适用情况

以上实现转换适用于：
（1）vue 组件中编写的下的css。
（2）从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import ../../static/css/reset.css引入css。
（3）在 vue 组件的import ../../static/css/reset.css中引入css。
另外的情况不适用：
（1）在 vue 组件的中通过@import "../../static/css/reset.css" (可考虑上面（2）、（3）的形式引入)。
（2）外部样式：``。
（3）元素内部样式：style="height: 417px; width: 550px;"。

最后编辑于：2020.07.08 11:52:32