Webpack & SCSS项目图片路径配置错误求助

我之前也碰到过一模一样的问题，核心原因是Webpack的资源路径解析逻辑没有和CSS文件的实际输出位置对齐。咱们一步步来调整配置解决这个问题：

问题根源拆解 #

你的CSS文件最终输出在dist/main.bundle.css，但生成的图片路径却带了dist/前缀，导致浏览器会从dist/目录下去找dist/assets/images/bg.jpg（也就是实际路径变成了dist/dist/assets/images/bg.jpg），这显然是错的。问题出在两个地方：

• Webpack的output配置没有明确指定输出根目录，导致loader的路径计算混乱
• css-loader没有被配置为生成相对于CSS文件的资源路径

修改后的Webpack配置 #

下面是调整好的webpack.config.js，我标了关键修改点：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 别忘了引入path模块！
var path = require('path');

module.exports = {
	watch: true,
	entry: ['./src/js/main.js', './src/scss/main.scss'],
	output: {
		// 1. 明确指定输出根目录为dist
		path: path.resolve(__dirname, 'dist'),
		// 2. 文件名不用再带dist/前缀了
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				loader: ExtractTextPlugin.extract({
					use: {
						loader: 'css-loader',
						options: {
							importLoaders: 1,
							// 3. 给css-loader设置publicPath，生成相对于CSS文件的路径
							publicPath: './'
						}
					},
				}),
			},
			{
				test: /\.(sass|scss)$/,
				use: ExtractTextPlugin.extract({
					use: [
						{
							loader: 'css-loader',
							options: {
								// 同样给scss对应的css-loader加上publicPath
								publicPath: './'
							}
						},
						'sass-loader'
					]
				})
			},
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: '[path][name].[ext]',
							context: path.resolve(__dirname, "src/"),
							// 4. 去掉outputPath的dist/，因为output.path已经是dist了
							// outputPath: 'dist/'
						}
					}
				]
			},
		]
	},
	plugins: [
		new ExtractTextPlugin({
			// 5. CSS文件名也不用带dist/前缀了
			filename: '[name].bundle.css',
			allChunks: true
		})
	]
};

为什么这样修改？ #

1. output.path的作用：明确告诉Webpack所有编译后的文件都输出到dist目录，后续所有loader的路径计算都会基于这个根目录，避免重复写dist/前缀。
2. css-loader的publicPath：这个配置会让css-loader生成相对于CSS文件所在目录的资源路径，而不是相对于项目根目录的路径。这样CSS里的url()就会变成assets/images/bg.jpg，刚好对应dist/assets/images/bg.jpg的实际位置。
3. file-loader的简化：去掉outputPath: 'dist/'后，结合context: src/和[path][name].[ext]，图片会被正确输出到dist/assets/images/目录下，和你的预期一致。

验证效果 #

修改后重新运行Webpack，生成的dist/main.bundle.css里的代码会变成：

body {
  background-image:url(assets/images/bg.jpg)
}

这个路径相对于dist/main.bundle.css来说，正好指向dist/assets/images/bg.jpg，浏览器就能正确加载图片了。

内容的提问来源于stack exchange，提问作者Mr. B.