使用Webpack打包压缩CSS时遇@符号解析错误求助

Hey there! That error you're hitting is super common when working with CSS containing @font-face in Webpack—let's break down why it's happening and fix it step by step.

What's causing the error? #

Webpack doesn't natively understand CSS syntax like @font-face or @import. It needs a loader to parse those special at-rules, resolve dependencies (like your font files), and process the CSS correctly. Your current setup is missing the proper loader chain to handle this.

Step 1: Install required dependencies #

First, make sure you have the necessary loaders and plugins installed. If you haven't already, run this in your project directory:

npm install css-loader style-loader extract-text-webpack-plugin file-loader --save-dev

• css-loader: Parses @import and @font-face rules, resolves paths to fonts and other assets
• style-loader: Falls back to injecting CSS into the DOM if extraction fails (useful for development)
• extract-text-webpack-plugin: Extracts CSS into separate files instead of bundling it with JS
• file-loader: Handles font files, copying them to your output directory and updating CSS references

Step 2: Update your Webpack config #

Here's how to adjust your config to handle CSS and font files properly. I'll fill in the missing parts of your existing config:

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

module.exports = {
  mode: 'development',
  entry: './src/index.js', // Replace with your actual entry file path
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') // Output directory
  },
  module: {
    rules: [
      // Handle CSS files with @font-face
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // Use style-loader if extraction fails
          use: 'css-loader' // Parse CSS rules
        })
      },
      // Handle font files referenced in @font-face
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader' // Copy fonts to dist folder
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css') // Name of the extracted CSS file
  ]
};

Alternative for Webpack 4+ (Recommended) #

Note that extract-text-webpack-plugin is no longer the official recommendation for Webpack 4 and above—it has issues with hot module replacement (HMR). Instead, use mini-css-extract-plugin for better compatibility:

1. Install it:

npm install mini-css-extract-plugin --save-dev

2. Update your config:

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // Extract CSS to file
          'css-loader' // Parse CSS rules
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    })
  ]
};

Final Checks #

• Make sure your @font-face rules have correct paths to your font files (relative to your CSS file)
• Double-check that all loaders are installed and config paths match your project structure

After making these changes, run your Webpack build again—it should now handle @font-face without throwing that parse error!

内容的提问来源于stack exchange，提问作者mr. Done