webpack转内联px为rem_angular9 如何 增加 webpack配置 并将px转换为rem

1.在项目中安装@angular-builders

npm i -D @angular-builders/custom-webpack

2.在你的项目根目录创建 webpack.config.js 文件 (和angular.json 同级)

module.exports = {

module: {

rules: [{

test: /.less$/,

use: [

'postcss-loader',

'less-loader',

]

}]

}

};

3.在你的angular.json 文件中 进行配置 首先 配置 ng serve 指令

"architect": {

...

"build": {

"builder": "@angular-builders/custom-webpack:browser", 这里进行替换

"options": {

这里进行添加

"customWebpackConfig": {

"path": "./extra-webpack.config.js"

},

...

}

},

"serve": {

"builder": "@angular-builders/custom-webpack:dev-server", 这里进行替换

"options": {

"browserTarget": "my-project:build"

}

}

一共需要替换两处，添加一处信息 具体替换，

更改内容可以查看 https://www.npmjs.com/package/@angular-builders/custom-webpack

或者 https://github.com/just-jeb/angular-builders

注意 如果需要使用postcss-loader 需要在根目录 创建 postcss.config.js 内容如下

module.exports = () => ({

plugins: [

require('postcss-pxtorem')({

rootValue: 192.0,

propList: ['*']

})

]

});

以上就是angular9 如何 增加 webpack配置 并将px转换为rem的全部内容。