Sunday, 16 June 2019

How to include additional postCSS plugins (postcss-preset-env) for Angular 7

I've recently started implementing CSS custom properties but need to support IE11 - hence the requirement for postcss-preset-env. So far I've discovered Angular's webpack config is not very customizable, but I have since installed custom webpack (https://www.npmjs.com/package/@angular-builders/custom-webpack).

How do I set up the config file to include and configure the postcss-preset-env plugin to correctly polyfill my CSS custom properties to work in all browsers? I expect any CSS files and also Angular component styles to be compiled with postcss-preset-env. So far I have created a custom-webpack.config.js file with the following:

const postcss = require('postcss-loader');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcss([
      postcssPresetEnv()
    ]).process()
  ]
}

I've also updated the angular.json build property to reference this file.



from How to include additional postCSS plugins (postcss-preset-env) for Angular 7

No comments:

Post a Comment