Webpack和Sass正确处理后台:url()图像但是当与webpack-dev-server一起使用时找不到它

Question

我正在使用Webpack 2和webpack-dev-server以及Sass加载器,实际配置:

{
    test: /\.scss/,
    loaders: [
        "style",
        { loader: "css", query: { modules: false, sourceMap: true } },
        { loader: "resolve-url" },
        { loader: "sass", query: { sourceMap: true } }
    ]
}

这非常有效,并且引用的图像background: url()由webpack处理,并且也可以替换为类似的样式background-somehash.jpg,可以通过键入来访问此文件http://localhost:8080/background-somehash.jpg.当我使用开发人员工具在样式背景定义中提供整个URL(包括localhost)时,它也有效...

唯一不起作用的是webpack生成的原始css,看起来像background: url(background-somehash.jpg).我也尝试过各种URL像./,../,../../或./images/尝试,如果根被设置在某种程度上有所不同.我没有得到的是该文件在根目录下可用...

编辑: 当与extract-text-webpack-plugin提取样式一起使用到单独的真实styles.css文件中时,它工作得很好.问题是为什么当从javascript包提供最终的css时它不起作用？

澄清: 一切都正确引用,图像是可用的,它所有的作品,当我使用CSS提取到单独的文件,extract-text-webpack-plugin它只是当完全一样的CSS是每天从不起作用bundle.js这是在当时引用的index.html像<link href="blob:..." rel="stylesheet">

Answer 1

您应该检查的事项：

webpack 能识别引用的图片吗？

只需删除镜像并检查 webpack 构建是否失败即可。如果是这种情况，则不是您的加载器配置的问题。

使用浏览器开发工具检查请求的 URL

如果请求以 404 终止：

• 检查output.publicPath(webpack) / contentBase(webpack-dev-server) 是否指向同一位置。这是从浏览器的角度来看的（=没有绝对文件路径）

• 如果您使用<base>- 标签，则需要确保它正确替换基本 URL。