如何移除Angular构建生成CSS文件的文件名哈希后缀？

Absolutely! You can get clean, hash-free CSS filenames (styles.css, app.css, debug.css) from your Angular build with a couple of straightforward approaches—depending on whether you want to keep hashing for other assets like JS files or disable it entirely. Let's break it down:

Option 1: Disable Hashing Globally (Quick & Simple) #

If you don't need content hashing for any build artifacts (JS, CSS, fonts, etc.), this is the fastest fix. Just update your angular.json build configuration to set outputHashing to none:

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "dist/your-project",
          "outputHashing": "none", // Removes hashes from all output files
          // ... other existing build options
          "styles": [ 
            "styles/bootstrap.scss", 
            "styles/misc.scss", 
            "styles/icons.scss", 
            { "input": "styles/app.scss", "bundleName": "app" }, 
            { "input": "styles/debug.scss", "bundleName": "debug" } 
          ]
        }
      }
    }
  }
}

After running ng build, your dist folder will have exactly the filenames you want: styles.css, app.css, and debug.css. Note that this will remove hashes from JS files and other assets too, which might impact cache busting in production environments.

Option 2: Keep JS Hashing, Remove CSS Hashing (Production-Friendly) #

If you want to retain content hashing for JS files (to leverage browser caching) but strip it from CSS, you'll need to use a custom Webpack configuration with Angular Builders. Here's how to set it up:

1. Install required dependencies:

npm install --save-dev @angular-builders/custom-webpack mini-css-extract-plugin

2. Create a custom Webpack config file (webpack.config.js) at your project root:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    // Configure CSS extraction to use clean, hash-free filenames
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  output: {
    // Keep hashing for JS files to maintain cache busting
    filename: '[name].[contenthash].js',
    chunkFilename: '[id].[contenthash].chunk.js'
  }
};

3. Update angular.json to use the custom builder:
   Replace the default browser builder with the custom Webpack builder and link your config file:

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "builder": "@angular-builders/custom-webpack:browser", // Switch to custom builder
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js" // Path to your custom config
          },
          "outputPath": "dist/your-project",
          "outputHashing": "bundles", // Preserve hashing for JS bundles
          // ... other existing build options
          "styles": [ 
            "styles/bootstrap.scss", 
            "styles/misc.scss", 
            "styles/icons.scss", 
            { "input": "styles/app.scss", "bundleName": "app" }, 
            { "input": "styles/debug.scss", "bundleName": "debug" } 
          ]
        }
      }
    }
  }
}

Bonus: Clean Up Your Styles Bundle Structure #

To make your merged styles.css (combining bootstrap.scss, misc.scss, icons.scss) more explicit (instead of relying on Angular's default merging), create a single entry SCSS file:

1. Create styles/styles-bundle.scss:

@import './bootstrap.scss';
@import './misc.scss';
@import './icons.scss';

2. Update your styles config in angular.json:

"styles": [
  {
    "input": "styles/styles-bundle.scss",
    "bundleName": "styles",
    "inject": false // Disable auto-injection since you're linking files manually
  },
  { 
    "input": "styles/app.scss", 
    "bundleName": "app",
    "inject": false
  }, 
  { 
    "input": "styles/debug.scss", 
    "bundleName": "debug",
    "inject": false
  }
]

This makes your bundle structure clear and avoids any unexpected merging behavior.

内容的提问来源于stack exchange，提问作者Chris Barr