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中使用(任意版本)