如何在自定义NPM包中通过Webpack+Sass加载本地字体？

Hey there! Let's work through this font loading issue together—custom fonts can be tricky in component libraries, but these steps should get you sorted:

1. Validate Your @font-face Path & Webpack url-loader Configuration #

First, double-check the relative path to your font files in typography.scss. If your font lives in src/assets/fonts/brownprott.woff2 and your SCSS file is in src/styles/, the path should look like this:

@font-face {
  font-family: 'brownprott';
  src: url('../assets/fonts/brownprott.woff2') format('woff2'),
       url('../assets/fonts/brownprott.woff') format('woff');
  /* Add other font formats and font-weight/style as needed */
}

Next, ensure your Webpack url-loader (or file-loader) is configured to handle fonts correctly, with a publicPath that matches the relative path from your extracted CSS to the output font files:

module.exports = {
  module: {
    rules: [
      // ... your JS/SCSS rules
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192, // Inline small fonts, use file-loader for larger ones
            name: 'fonts/[name].[hash:8].[ext]',
            outputPath: 'dist/', // Matches your output directory
            publicPath: '../' // Adjust based on your CSS output location
          }
        }
      }
    ]
  }
}

The publicPath is critical here—if your CSS is output to dist/styles/ and fonts to dist/fonts/, the relative path from CSS to fonts is ../fonts/, so set publicPath: '../'.

2. Ensure Global Injection of Font Styles #

For all your components to inherit the font, you need to make sure the typography.scss is imported globally in your package's entry file (src/index.js):

// src/index.js
import './styles/typography.scss';
// Import and export your components below
export { default as Button } from './components/Button';
// ... other exports

Also, verify that your styled components are using the exact font-family name from @font-face (case-sensitive!):

const StyledButton = styled.button`
  font-family: 'brownprott', sans-serif;
  // ... other styles
`;

3. Check ExtractTextPlugin Output Path #

Confirm your ExtractTextPlugin is outputting CSS to the correct location, as this affects the font path resolution:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  plugins: [
    new ExtractTextPlugin({
      filename: 'dist/styles/[name].css', // Match your desired CSS output path
      allChunks: true
    })
  ]
};

If your CSS is in dist/styles/, the publicPath in your font loader should point up one directory to reach dist/fonts/, hence ../.

4. Verify Built Files & Browser Network Tab #

After running webpack --watch, check your dist directory to confirm:

• Font files are present in the expected fonts/ subdirectory
• The extracted CSS file has the correct font path (e.g., url('../fonts/brownprott.woff2?abc123'))

Then, load your package in a test project and check the browser's Network tab—if you see a 404 for the font file, the path in the CSS is incorrect.

5. Fallback to file-loader if Needed #

If url-loader is causing issues with larger font files, switch to file-loader directly for more predictable path handling:

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[hash:8].[ext]',
      outputPath: 'fonts/',
      publicPath: '../fonts/' // Adjust based on CSS location
    }
  }
}

Start with checking the @font-face path and publicPath setting—those are the most common causes of this issue. Let me know if any of these steps resolve your font loading problem!

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