定位错误
项目使用webpack4进行编译,打包后的样式中使用url方法指定的背景图片不能够正常显示
源码戳这里
.bgurl{background-image: url('/images/abc.jpeg')}
上述样式在webpack中编译出错,配置如下
// stylus[loader: MiniCssExtractPlugin.loader,{loader: 'css-loader',options: {importLoaders: 2,}},'postcss-loader','stylus-loader']
始终爆图片未找到的错误,按照网上找到的解决方案,补全MiniCssExtractPlugin
配置项publicPath
,但依然出错。看来问题不是出在MiniCssExtractPlugin
。后经过仔细排查。定位到错误其实是css-loader
编译时爆出来的。
去npm上找到css-loader
配置,找到如下内容
url
Type: Boolean|Function Default: true
Enables/Disables url/image-set functions handling. Control url() resolving. Absolute URLs are not resolving.
Examples resolutions:
url(image.png) => require('./image.png')url('image.png') => require('./image.png')url(./image.png) => require('./image.png')url('./image.png') => require('./image.png')url('/2112.png') => require('/2112.png')image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')
属性url
默认为true,此属性默认强行解释样式中使用url定位的图片,默认寻址该图片地址(与css同源地址),因同源地址图片不存在(实际图片存在于另外的目录),造成编译错误。
修正webpack配置
[{loader: MiniCssExtractPlugin.loader,options: {publicPath: '//localhost:3000/', }},{loader: 'css-loader',options: {importLoaders: 2,url: false }},'postcss-loader','stylus-loader']
publicPath
此项配置可以共用webpack.output配置,但建议在MiniCssExtractPlugin.loader
中独立设置。有以下两个原因
css的url(…)中的图片一般是相对路径寻址图片运维会提供静态资源服务器,图片有专属的域名地址
url
将css-loader
的配置url设为false,使css-loader不解析样式中url(…)的图片地址,保持原有属性
至此,webpack打包样式url()背景图片问题得以解决,希望对大家有帮助