Angular5+Webpack中postcss-merge-rules版本报错及Angular Universal构建问题

Hi there, let's break down these two PostCSS-related issues you're facing in your Angular 5 + Webpack + Angular Universal setup:

1. Version-related error with postcss-merge-rules in Angular 5 + Webpack #

Angular 5 is a fairly old version, pairing with specific versions of Webpack (likely v3.x) and PostCSS (usually v6.x or lower). Modern releases of postcss-merge-rules (v5+) require PostCSS 8+, which creates a compatibility mismatch. Here's how to resolve it:

• First, check your current PostCSS version by running:

  npm list postcss
  # Or if using Yarn:
  yarn list postcss
  

• Install a version of postcss-merge-rules compatible with your PostCSS version. For Angular 5, the v4.x series is a safe choice. Run:

  npm install postcss-merge-rules@4.0.3 --save-dev
  # Yarn alternative:
  yarn add postcss-merge-rules@4.0.3 --dev
  

• Verify your PostCSS configuration (usually in postcss.config.js) correctly imports the plugin without conflicting settings:

  module.exports = {
    plugins: [
      require('postcss-merge-rules')({
        // Optional: Add project-specific config if needed
      })
      // Other PostCSS plugins...
    ]
  };
  

2. PostCSS plugin error during ng build --prod with Angular Universal, Bootstrap & Font Awesome #

This error only triggers in production builds with these two libraries, pointing to a conflict between PostCSS optimization plugins and the CSS syntax/features used by Bootstrap or Font Awesome. Try these fixes:

• Pinpoint the problematic plugin: Check your error logs to identify which PostCSS plugin is failing (common culprits are cssnano or postcss-preset-env). Once identified, adjust its configuration to exclude Bootstrap/Font Awesome files.
• Exclude vendor files from aggressive optimizations: Update your postcss.config.js to skip certain plugins for Bootstrap and Font Awesome:

  module.exports = {
    plugins: [
      // Example: Exclude vendor CSS from merge-rules processing
      require('postcss-merge-rules')({
        exclude: /node_modules\/(bootstrap|font-awesome)/
      }),
      // If using cssnano, disable conflicting optimizations
      require('cssnano')({
        preset: ['default', {
          mergeRules: false,
          discardUnused: false // Tweak based on your specific error log
        }]
      })
      // Other plugins...
    ]
  };
  

• Use SCSS versions of Bootstrap/Font Awesome: Instead of importing pre-compiled CSS files, use their SCSS sources in your styles.scss for better integration with Angular's build pipeline:

  @import '~bootstrap/scss/bootstrap.scss';
  @import '~font-awesome/scss/font-awesome.scss';
  

• Update Angular Universal packages: Ensure you're using the latest compatible version of Angular Universal for Angular 5 (v5.x series of @nguniversal/express-engine). Outdated Universal packages can cause build pipeline conflicts with PostCSS.

内容的提问来源于stack exchange，提问作者Pablo Reinoso