angular移动端项目屏幕适配方案 (比rem方案更好) - postcss-px-to-viewport

1> npm i @angular-builders/custom-webpack --save-dev (angular项目本身不允许配置，步骤 1 2为它添加自定义配置)

2>修改angular.json

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

3>npm i --save-dev to-string-loader css-loader postcss-import postcss-px-to-viewport postcss-scss postcss-url precss （屏幕适配所需要的所有依赖）

npm i --save-dev to-string-loader css-loader postcss-import postcss-px-to-viewport postcss-scss postcss-url precss

4>在根下面新建webpack.config.js配置文件

console.log('webpack.config.js配置文件执行了...')
// postcss插件
const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    syntax: 'postcss-scss',
    plugins: () => [
      require('postcss-import')({
        path: ['src']
      }),
      require('precss')(),
      require('postcss-px-to-viewport')({
        viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
        viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false // 允许在媒体查询中转换`px`
      }),
      require('autoprefixer')({
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ],
        grid: true
      }),
    ]
  }
};

module.exports = (config, options) => {
  // config就是系统的webpack配置
  // 第一步过滤掉系统的css和sass处理
  config.module.rules = config.module.rules.filter(
    rule => rule.test.toString() !== '/\\.scss$|\\.sass$/' && rule.test.toString() !== '/\\.css$/'
  );

  // 配置自定义的css处理
  config.module.rules.push({
    test: /\.(css)$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
      postcssLoader
    ]
  });

  // 配置自定义的sass处理
  config.module.rules.push({
    test: /\.(scss|sass)$/,
    use: [
      'to-string-loader',
      'css-loader',
      'sass-loader',
      postcssLoader
    ],
  });

  console.log('config ==>', config)
  return config
};

5>重启项目 - 记住改了配置文件必须重启

我的高保真设计稿尺寸为375px 所以我配置的是375 ，在css中直接输入设计稿上的尺寸值，自动转换为不同屏幕下的适配单位 xx vw

用法经过我的总结梳理，已经超级简单了，直接复制上面代码就好，如果觉得有任何疑问的或者讲的不好的地方可以给我留言或者评论，谢谢大家！！！ 共同进步

文章源自：
https://juejin.cn/post/6844904066611412999