5

我将 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（包括本地主机）时，它也可以工作......

唯一不起作用的是由 webpack 生成的原始 css，看起来像background: url(background-somehash.jpg). 我还尝试了各种 url，例如,./或尝试是否以某种方式设置了不同的 root。我没有得到的是该文件在根目录下很容易获得......../../.././images/

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

澄清： 一切都被正确引用，图像可用，当我使用它将css提取到单独的文件中时一切正常，只是在提供完全相同的extract-text-webpack-plugincss时不起作用bundle.jsindex.html<link href="blob:..." rel="stylesheet">

4

1 回答 1

0

你应该检查的事情：

引用的图片是否被 webpack 识别？

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

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

如果请求以 404 终止：

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

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

于 2016-04-03T12:45:04.923 回答