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

Posted 2023-02-22

【中文标题】Webpack 和 Sass 正确处理 background: url() 图像，但是在与 webpack-dev-server 一起使用时找不到它

【英文标题】：Webpack and Sass correctly processes background: url() image but then it's not found when used with webpack-dev-server

【发布时间】：2016-07-22 09:44:47

【问题描述】：

我正在使用 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，例如 ./、../、../../ 或 ./images/，以尝试是否以某种方式设置了不同的 root。我没有得到的是该文件在根目录下很容易获得......

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

澄清： 一切都正确引用，图像可用，当我使用 extract-text-webpack-plugin 将 css 提取到单独的文件中时一切正常喜欢<link href="blob:..." rel="stylesheet">

【问题讨论】：

这与 Sass 有什么关系？除非您得到的编译后的 CSS 与您预期的不同，否则这与 Sass 无关。

好吧，我不知道，我读过一些博客文章，从其他 sass 文件导入 sass 文件时，相对路径可能会损坏，这也是我使用源映射和resolve-url 插件如示例...所以可能是一些 sass 交互/内部工作不确定...

Sass 只是编译成 CSS。而已。如果您编译的 CSS 包含您所期望的内容，那么 Sass 与您的问题无关。你甚至知道你期望它包含什么吗？

【参考方案1】：

您应该检查的事项：

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

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

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

如果请求以 404 终止：

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

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

【讨论】：

答案用于回答问题。如果您想要求澄清，请使用 cmets 直到您有足够的信息来明确回答问题。

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