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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vwselectorBlackList: ['.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
用法经过我的总结梳理，已经超级简单了，直接复制上面代码就好，如果觉得有任何疑问的或者讲的不好的地方可以给我留言或者评论，谢谢大家！！！ 共同进步
文章源自：
/post/6844904066611412999
如果觉得《angular移动端项目屏幕适配方案 (比rem方案更好) - postcss-px-to-viewport》对你有帮助，请点赞、收藏，并留下你的观点哦！
