Got it, let's tackle this issue head-on. The core problem here is that when you use ExtractTextPlugin to pull CSS out of your bundled JS into separate files, css-loader starts resolving image paths relative to the output location of the extracted CSS—not your original Sass files. That mismatch breaks url-loader's ability to process those images. Here's how to fix it without using file-loader:

Step 1: Adjust css-loader's publicPath #

Add the publicPath option to your css-loader config. This tells css-loader to rewrite image URLs in the extracted CSS to point to the correct directory where your images will be output. For example, if your extracted CSS ends up in dist/css/ and images go to dist/img/, set publicPath: '../img/' to correct the relative path.

Step 2: Configure url-loader's outputPath #

Add the outputPath option to url-loader to explicitly set where your images should be bundled. This ensures the images end up in the directory you specified in publicPath.

Modified Webpack Config Snippets #

Updated CSS/Sass Rule:

test: [/\.scss$/, /\.sass$/],
use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
        { 
            loader: 'css-loader', 
            options: { 
                importLoaders: 2,
                // Adjust this path based on your output directory structure
                publicPath: '../img/' 
            }, 
        }, 
        { loader: 'postcss-loader', options: {} }, 
        { loader: 'sass-loader' }, 
    ], 
}),

Updated url-loader Rule:

{ 
    test: /\.(png|jpg|gif|svg)$/, 
    use: [ 
        { 
            loader: 'url-loader', 
            options: { 
                limit: 8192,
                // Output images to the img/ directory in your build folder
                outputPath: 'img/',
                // Optional: Customize filenames with hashes for cache busting
                // name: '[name].[hash:8].[ext]'
            } 
        } 
    ] 
}

Step 3: Verify Your ExtractTextPlugin Filename #

Make sure your ExtractTextPlugin instance is configured to output CSS to the directory you accounted for in publicPath. For example:

new ExtractTextPlugin({
    filename: 'css/[name].css'
})

Why This Works #

• publicPath on css-loader rewrites every url() reference in your extracted CSS to point from the CSS file's location to the image directory.
• outputPath on url-loader ensures images are bundled into the exact directory you specified, so the rewritten paths work correctly.
• Double-check that your Sass files use relative paths for images (e.g., background: url('../images/test.png')) relative to the Sass file itself—this helps css-loader resolve the path before rewriting it.

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