angular8 + ionic 如何集成px to viewport

移动端 响应式 px转rem px转vw

移动端app，ionic脚手架搭建的angular框架，版本angular8，设计稿尺寸750*1334。

最近因为疫情的原因，一直在家办公，在看到前端同事写了一张登录页之后，宽、高、边距都是用的px，切换不同设备页面就有问题了，遂决定要像之前vue项目一样，用webpack来安装pxtorem插件一样处理样式。

使用第三方构建方案：@angular-builders/custom-webpack。具体步骤如下：

1、安装依赖：

npm install -D @angular-builders/custom-webpack@8.4.1

说明：一开始没有加版本号，会自动安装最新版，和项目angular8版本不匹配，必须用8开头，手动加在package.json里^8.0.0,安装之后是8.4.1，故可以直接加上版本号执行。

2、在 angular.json 中增加 customWebpackConfig 配置项

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.ts"
        }
      },
      "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server"
      }
    }
  }
}

3、新建配置文件 webpack.config.ts 文件，内容参考如下：

var pxtoviewport = require("postcss-px-to-viewport");

function regexEquals(firstValue, secondValue) {
  return firstValue + "" == secondValue + "";
}
const addPostCssPlugins = [
  pxtoviewport({
    viewportWidth: 750,
    viewportHeight: 1334,
    unitPrecision: 2,
    viewportUnit: "vw",
    selectorBlackList: [],
    minPixelValue: 1,
    mediaQuery: false
  })
];

module.exports = (config, options) => {
  let rules = config.module.rules;
  let styleRules = rules.filter(rule => {
    let test = rule.test;
    return (
      regexEquals(test, /\.css$/) ||
      regexEquals(test, /\.scss$|\.sass$/) ||
      regexEquals(test, /\.less$/) ||
      regexEquals(test, /\.styl$/)
    );
  });

  styleRules.forEach(rule => {
    let currentPostCssLoader = rule.use.find(
      loader => loader.loader === "postcss-loader"
    );
    let getPluginsFn = currentPostCssLoader.options.plugins;
    let getPluginsAddedFn = loader => {
      return [ ...getPluginsFn(loader), ...addPostCssPlugins ];
    };
    currentPostCssLoader.options.plugins = getPluginsAddedFn;
  });
  return config;
};

其中postcss-px-to-viewport需要npm安装:

npm install -D postcss-px-to-viewport 

完成配置。