angular12 配合 postcss-pxtorem amfe-flexible 移动端适配

demo地址：
https://gitee.com/lh9703/angular12MobilePostcssPxtorem

1.安装必要依赖

npm i -D @angular-builders/custom-webpack
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

2.创建webpack.config.js文件（文件夹跟angular.json同级）

webpack.config.js

module.exports = {
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        'postcss-loader',
        'less-loader',
      ]
    }]
  }
};

3.创建postcss.config.js文件（文件夹跟angular.json同级）

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 75, // 这个建议37.5
      exclude: /node_modules/,
      propList: ['*']
    }
  }
}

4.修改angular.json内容

projects.architect.build中覆盖builder

builder:"@angular-builders/custom-webpack:browser"

projects.architect.build.options中加入代码

"customWebpackConfig": {
 "path": "./webpack.config.js",
  "mergeStrategies": {
    "module.rules": "append"
  },
  "replaceDuplicatePlugins": true
}

projects.architect.serve中覆盖builder

builder:"@angular-builders/custom-webpack:dev-server"

修改完成后是这样的：

此时运行项目会看到这种情况（样式设置为48px，在界面上看到px已经被转为rem了，但是拉动屏幕不会跟着变大变小，原因就是在html这里并没有被设置根字体大小，这个时候需要引入amfe-flexible这个插件【这个咱们在一开始就已经引入了】，或者自己去写【会踩坑哦】）

5.引入amfe-flexible插件（import ‘amfe-flexible’;）完成最后一步

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'amfe-flexible'; // 上下文不用复制，用你们自己的就行了，只用复制这一句，这一句才是重点

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

最终效果如此：（改变视图宽度字体大小跟着改变）


—踩坑花了一上午（从插件为啥子不能用开始【一开始在scripts里面引用node_modules里面的postcss-pxtorem,结果发现require这个无效…这个方法是错误的】，到webpack无效，再去研究如何在angular引入webpack，再然后成功，记录自己的成功捷径，下次自己用）
备注：重点是只要有postcss-pxtorem amfe-flexible这两个插件配合webpack就可以在react、angular、vue中使用（任意版本）