angular9 如何 增加 webpack配置 并将px转换为rem

 

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

?

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

 

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

?

1 2 3 4 5 6 7 8 9 10 11

module.exports = {   module: {     rules: [{       test: /\.less$/,       use: [         'postcss-loader',         'less-loader',       ]     }]   } };

　　

 

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

"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 内容如下

?

1 2 3 4 5 6 7 8

module.exports = () => ({   plugins: [     require('postcss-pxtorem')({       rootValue: 192.0,       propList: ['*']     })   ] });