如何使用Webpack渲染CSS？新手配置遇阻求助

Hey there! No worries at all—everyone fumbles a bit when starting out with Webpack, it’s got a steep learning curve. Let’s walk through the most common fixes for getting your CSS to load properly:

1. Double-check you’ve installed the necessary loaders #

Webpack can’t process CSS out of the box—you need two key loaders (or a plugin for production):

• Run this command to install the dev dependencies:

  npm install css-loader style-loader --save-dev
  

  If you’re targeting production and want to extract CSS into separate files, also install mini-css-extract-plugin:

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

2. Validate your webpack.config.js module rules #

The order of loaders matters (they run right-to-left)! Here’s what a correct setup looks like:

For development (inject CSS into the DOM via style tags): #

module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.css$/i, // Matches all .css files
        use: ['style-loader', 'css-loader'], // style-loader injects, css-loader parses
      },
    ],
  },
};

For production (extract CSS to standalone files): #

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

module.exports = {
  // ... other config
  plugins: [new MiniCssExtractPlugin()], // Generates a separate CSS file
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

3. Ensure you’re importing your CSS in your entry file #

Webpack only bundles files you explicitly import. In your main JS file (like src/index.js), add:

import './path/to/your/styles.css';

Replace the path with the actual location of your CSS file relative to the entry file.

4. Verify your html-webpack-plugin setup #

If you’re using this plugin to generate your HTML, make sure it’s configured to use your template:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... other config
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Path to your raw HTML template
    }),
  ],
};

Don’t manually add a <link> to the bundled CSS in your template—the plugin will inject it automatically, avoiding path errors.

5. Check for errors in your build output and browser console #

• Run your build command (npm run build or npx webpack) and look for red error messages in the terminal—missing loaders or typos in config are common culprits.
• Open the generated HTML file:
  • For development, look for a <style> tag in the <head> with your CSS.
  • For production, check for a <link> tag pointing to the generated CSS file.
• Open your browser’s dev tools console to spot 404 errors (which mean the CSS file path is wrong).

If you work through these steps and still hit a wall, share your full webpack.config.js code and how you’re importing your CSS, and we can troubleshoot further!

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