在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
首先使用yarn或npm安装 @angular-builders/custom-webpack，然后安装postcss-loader post-px-to-viewport postcss-flexbugs-fixes postcss-preset-env viewport-units-buggyfill.
在根目录下新建webpack文件夹，建立webpack.config.js，建立postcss.config.js,用于配置css预处理。
修改angular.json配置的build打包配置，和serve开发配置，build打包配置下的builder修改为：
"@angular-builders/custom-webpack:browser"模式,此模式可以在多种情况下被调用。第一种情况是直接打包时调用，它会加上production生产环境参数，第二种情况是serve开发模式下调用。
修改serve下的builder为："@angular-builders/custom-webpack:dev-server"，它运行时会直接调用build下的builder运行，不带生产环境参数
在build打包配置下options下添加：
"customWebpackConfig":{
"path":"./webpack/webpack.config.dev.js", //相对于项目根路径
"mergeStrategies": { //webpack配置合并方式
"externals": "replace" //替换
}
},
webpack.config.js里的配置：
module.exports = (config, options)=>{
//options即是angular.json里配置它时的options
//config 即是系统已经自定义配置好的webpack配置(与手动搭建框架的配置参数相同)，可根据需要自定义修改
//console.log(config.module.rules) 过滤掉要配置的
config.module.rules = config.module.rules.filter(
rule => rule.test.toString() !== "/\\.scss$|\\.sass$/"
)
config.module.rules.push({
test: /\.scss$|\.sass$/,
use: [
{
loader: 'raw-loader' //与react，vue不同，angular加载css样式是使用law-loader
},
{
loader: 'postcss-loader',
options: {
config: {
path: './webpack/postcss.config.js'
}
}
},
{
loader: 'sass-loader'
},
]
});
return config;
}
下面是postcss.config.js文件：
module.exports = {
plugins:[
require('autoprefixer'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
stage:3
}),
// require('postcss-pxtorem')({
// rootValue:75,
// propList:['*','!font*'],
// minPixelValue:2
// }),
require('postcss-px-to-viewport')({
unitToConvert:'px', //要转换的单位,
viewportWidth:750, //视口宽度(设计稿)
viewportHeight:1334, //视口高度(设计稿)
propList: ['*',],//'!font*'
viewportUnit:'vw', //转换之后的单位
minPixelValue:2,
mediaQuery:true, //允许在媒体查询中进行px转换
unitPrecision: 3, //允许vw单位转换之后保存的小数位数
landscape: true, // 允许横屏模式,如果设置为flase,手机横屏的时候，布局会很难看
landscapeUnit: 'vw', //允许横屏时的单位
fontViewportUnit: 'vmin', //字体要转换成的单位,始终选择vmin,避免因旋转的影响
landscapeWidth: 1334, //设置横屏模式的width
selectorBlackList: [/ant*/] // 不转换为vw的
})
]
}
viewport-units-buggyfill插件是做vw的兼容处理的，在main.ts中引入，并使用：
const hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({hacks:hacks})；
如果在开发的Terminal报警告,则先在全局的tsconfig.app.json的compilerOptions的types数据里添加'node',
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["node"]
},
再在angular.json的bulid打包配置的options下添加配置"allowedCommonJsDependencies"：["viewport-units-buggyfill"]
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"allowedCommonJsDependencies": [
"viewport-units-buggyfill"
],
"customWebpackConfig":{
"path":"./webpack/webpack.config.js",
"mergeStrategies": {
"externals": "replace"
}
},
"outputPath": "dist/ng-todo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
本文地址：https://blog.csdn.net/HZZOU/article/details/107551130