安裝自定義用的插件
npm i -D @angular-builders/custom-webpack @angular-builders/dev-server postcss-px-to-viewport
檢查一下@angular-builders的主版本號（7.x.x）是不是和我們的@angular/cli主版本一致项滑，這里用angular7來示范。
修改angular.json文件衔统，全局搜索
@angular-devkit/build-angular:browser
替換為
@angular-builders/custom-webpack:browser
在@angular-builders/custom-webpack:browser同級的options選項里添加
"customWebpackConfig": {
"path": "./webpack.config.js"
},
全局搜索
@angular-devkit/build-angular:dev-server
替換為
@angular-builders/dev-server:generic
在angular.json同級目錄下新增webpack.config.js，內(nèi)容如下
var pxtoviewport = require('postcss-px-to-viewport');
function regexEquals(firstValue,secondValue){
return firstValue+'' == secondValue +'';
}
const addPostCssPlugins = [//自定義的postcss插件
pxtoviewport({
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
})
]
module.exports = (config, options) => {
// console.log(config.module.rules);
let rules = config.module.rules;
let styleRules = rules.filter(rule => {
let test = rule.test;
return regexEquals(test,/\.css$/)|| regexEquals(test,/\.scss$|\.sass$/)|| regexEquals(test,/\.less$/)|| regexEquals(test,/\.styl$/);
});
console.log(styleRules)
styleRules.forEach(rule => {
// console.log(rule);
let currentPostCssLoader = rule.use.find(loader => loader.loader==='postcss-loader');
let getPluginsFn = currentPostCssLoader.options.plugins;
let getPluginsAddedFn = (loader)=>{
return [...getPluginsFn(loader),...addPostCssPlugins];
}
currentPostCssLoader.options.plugins = getPluginsAddedFn;
// console.log(typeof currentPostCssLoader.options.plugins)
// console.log(currentPostCssLoader.options.plugins())
// currentPostCssLoader.options.plugins.push(...addPostCssPlugins);
})
return config;
};
然后吧彪，運行npm start,運行ng build --prod試驗下效果氧急，你會看到我們自定義的postcss插件已經(jīng)起作用了斯辰。
附錄：https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
