在选择表单中显示图标问题（Blueprint 2.0.0-rc.2 + Webpack）

Hey there! Let's figure out why your Blueprint icon fonts aren't loading even though the rest of the CSS works. Since you suspect an import issue, this is almost certainly related to how Webpack handles font assets or how you're importing Blueprint's styles. Here are the most likely fixes to try:

1. Make sure you're importing the icon-specific CSS #

Blueprint's icon fonts rely on a separate CSS file that's easy to miss. In your app.tsx, double-check that you're importing both core styles and icon styles:

// Core Blueprint styles
import "@blueprintjs/core/lib/css/blueprint.css";
// Critical for icon fonts—don't skip this!
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

If you only import the core CSS, the font references won't exist at all, which matches your symptom of missing fonts.

2. Configure Webpack to handle font assets correctly #

Webpack doesn't process font files (.woff, .woff2, .ttf, .eot) by default—you need to set up a loader to copy them to your build directory and update the CSS paths to point to them. Add this rule to your webpack.config.js:

module.exports = {
  module: {
    rules: [
      // ... your existing rules for JS/TS, CSS, etc.
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/', // Saves fonts to dist/fonts/
              publicPath: '../fonts/' // Adjust this based on your CSS output path
            }
          }
        ]
      }
    ]
  }
};

• outputPath: Tells Webpack where to put the font files in your build folder.
• publicPath: This is crucial—if your CSS is output to a css/ subfolder, the path needs to go up one level to reach the fonts/ folder. If your directory structure is different, tweak this path to match.

3. Verify Webpack's global publicPath setting #

If your app is deployed to a subdirectory (not the root domain), Webpack's output.publicPath might be pointing to the wrong place, causing font requests to fail. Check your config:

module.exports = {
  output: {
    // ... other output settings
    publicPath: '/' // Use '/your-subdirectory/' if deploying to a subpath
  }
};

4. Clean your build cache and rebuild #

Old cached assets can sometimes cause path mismatches. Delete your entire build output folder (usually dist/), then run your build command again (npm run build or webpack) to generate fresh assets.

5. Double-check index.html CSS references #

If you're loading Blueprint CSS directly in index.html (instead of importing it in app.tsx), make sure the CSS file you're referencing includes the icon font rules. If you're using a CDN, ensure you're including both the core and icon CSS files from the same version of Blueprint.

Start with step 1 first—it's the most common mistake. If that doesn't fix it, move on to configuring the font loader. Let me know if any of these steps resolve your issue!

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