这篇文章给大家分享的是有关怎么解决webpack打包css背景图片路径问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
站在用户的角度思考问题，与客户深入沟通，找到平远网站设计与平远网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计、
网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、
网站空间、企业邮箱。业务覆盖平远地区。
在vue组件的style标签内部有如下一段使用背景图片的css代码
background-image: url("../assets/img/icon_add.png");在webpack中css-loader的解析配置如下
{
test: /\.(css|less)$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: ['style-loader', 'css-loader', 'less-loader']
}打包后在dist目录的发现没有css文件。这是因为css文件被转化成了js文件。
此时启动项目，背景图片引入正确，能够正常显示。
2 将css文件提取到单独的文件目录
使用 mini-css-extract-plugin 将css文件单独提取到dist目录下的css目录下。
2.1 loader配置
{
test: /\.(css|less)$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}2.2 plugin配置
new MiniCssExtractPlugin({
filename: 'css/[name][contenthash].css',
})打包后，dist目录结构如下
可以看到此时图片在根目录(dist)目录下，但是css文件处在dist/css/目录下。现在来看一下打包后的css文件是如何引用图片的路径。
2.3 打包结果
background-image: url(bb65a86a2fe7669e483a56b970bea421.png);
可以看到在dist/css目录下没有bb65a86a2fe7669e483a56b970bea421.png图片。因此图片无法正常显示。理想的情况是
background-image: url(../bb65a86a2fe7669e483a56b970bea421.png);
3 解决方案
更改loader的配置如下
{
loader: MiniCssExtractPlugin.loader,
options: {
// 当前的css所在的文件相对于打包后的根路径dist的相对路径
publicPath: '../'
}
}, 'css-loader', 'less-loader'感谢各位的阅读！关于“怎么解决webpack打包css背景图片路径问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
文章标题：怎么解决webpack打包css背景图片路径问题-创新互联
链接地址：
http://cdkjz.cn/article/dpjicd.html
