无法使用Webpack解析CSS中背景图片的绝对url()路径 [英] Unable to resolve absolute url() paths for background images in CSS with Webpack
问题描述
我有以下Webpack配置(大致上,本文已简化):
I have the following Webpack config (roughly, it has been simplified for this post):
const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');
// ... loaders:
loaders: [
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader?limit=10000&name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
: ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
}, // ...
]
现在,这对于在scss文件中正常引用的图像来说效果很好:
Now this works perfectly fine for images referenced normally in scss files:
.some-static-class {
background: url('/images/bg.png');
}
但是,使用:local
指令时,不起作用:
However, it does not work when using the :local
directive:
:local .SomeClass {
background: url('/images/bg.png');
}
我认为这是因为root
是为CSS加载程序定义的.我收到一个构建错误:Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif
And I think that's because root
is defined for the CSS loader. I get a build error: Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif
如果相反,我从css-loader配置中删除了root
,则它可以正常运行,但是在Chrome的检查器中路径看起来"正确,但是当您实际在新标签页中打开链接时,它指向:chrome-devtools://devtools/bundled/"/images/bg.png"
显然无法正确解决.
If instead I remove root
from the css-loader config, then it builds fine but then the path "looks" correct in Chrome's inspector, but when you actually open the link in a new tab, it points to: chrome-devtools://devtools/bundled/"/images/bg.png"
which obviously doesn't resolve correctly.
我不确定问题是否出在url-loader
配置上,或者到底是怎么回事.
I'm not sure if the problem is with the url-loader
config, or what's going on exactly.
我尝试了不同的Webpack配置,以指定resolve.root,resolve.modulesDirectories等,但完全不确定它们是否有任何影响,或者我是否会完全错误.我还遇到了resolve-url-loader
,但不确定这是否就是我所需要的.
I played around with different webpack configs to specify the resolve.root, resolve.modulesDirectories, etc but totally not sure if they're having any affect or if I'm just going about it completely wrong. I also came across resolve-url-loader
but not sure if that's even what I need at all.
有什么想法吗? MTIA!
Any ideas? MTIA!
更新
我应该注意,它在Safari中可以正常工作,但在Chrome中不能正常工作.因此,这似乎是一个特定于Chrome的错误,但是必须在Safari中进行所有开发都是不切实际的.
I should note, that it works fine in Safari, but not in Chrome. So it seems like a Chrome-specific bug, but it's not practical to have to do all our development in Safari.
我也遇到过 vue-style-loader ,它是声称可以解决此问题的样式加载器,但其解决方法是依靠不推荐使用的hacky不推荐使用的转义/转义方法.
I also came across, vue-style-loader, which is a fork of style-loader that claims to fix this issue, but the way it fixes it is by relying on a hacky deprecated escape/unescape method.
推荐答案
我可以提出的一种可能的解决方案是:
One possible solution that I could come up with was the following:
使用resolve-url-loader
(紧随sass-loader
之后):
style!${CSS_LOADER}!autoprefixer!resolve-url!${SASS_LOADER}
然后,为静态图像定义resolve.alias:
Then, define a resolve.alias for static images:
resolve: {
alias: {
images: path.join(__dirname, 'public/images')
}
}
然后在CSS中,您可以像这样指向图像:
And then in the CSS, you can point to the images like so:
:local .SomeClass {
background: url('images/bg.png');
}
根据您的URL结构,您可能还需要调整url-loader
名称参数:
Depending on your URL structure, you may also need to tweak the url-loader
name param:
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader?limit=10000&name=images/[name].[ext]'
}
所以我不知道是否有更干净的方法来解决此问题,但这是迄今为止我能想到的最好的方法.我欢迎任何反馈或替代方案.
So I don't know if there's a cleaner way to solve this issue, but that's the best I could come up with so far. I'd welcome any feedback or alternatives.
谢谢!
更新2016年6月30日
有一些PR可以解决此问题,但是维护者更喜欢将解决方案放在CSS AST中,而不是在CSS加载器中...
There's a couple PR's out that would address this issue, but the maintainer prefers the solution to be in the CSS AST rather than in the CSS loader...
https://github.com/webpack/style-loader/pull/124 https://github.com/webpack/style-loader/pull/96
这里希望真正的解决办法能尽快发生...
Here's hoping a real fix happens soon...
这篇关于无法使用Webpack解析CSS中背景图片的绝对url()路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!