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: ['*'] }) ] });