html - Webpack 正在从我在 Sass 中的 url("img/image.jpg") 中删除引号。我怎样才能保留引号？

Question

这是我的 Sass 的一部分：

footer {
//...
    & > a {
        background: url("../img/logo-e.svg");
    }
}

Webpack 处理然后在 url() 中输出不带引号的背景。

这种情况很好，因为所有浏览器仍然呈现图像。

但是，这是我的 Sass 的另一部分：

:root {
    --logo: url("../img/logo-light.svg");
}

在这里可以看到相同的行为，其中 Webpack 去除了输出 CSS 文件中的引号。

在这里，我使用 CSS 变量在深色或浅色模式下加载正确的徽标图像。结果，屏幕截图显示 Safari 14 尝试转义特殊字符，因此没有渲染任何内容。

在 localhost 中，Safari 按预期显示图像。该图像不仅在 GitHub Pages 中实时呈现。

我发现了这个，讨论了 2017 年修复的 CSS-loader 中的一个类似错误。它没有多大帮助。

我试过没有成功：

• 将 URL 包裹在 Sassquote()函数周围。
• 使用这个转义引号：url("\"/img/logo-light.svg\"");

问题在于开发模式（没有缩小）和生产。

如何让 CSS-loader 保留引号以便图像在 Safari 中显示？

附加信息：这是我用于 SCSS 处理的 Webpack 5 配置规则：

rules: [
            {
                test: /\.(scss)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        },
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: ["autoprefixer"],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                    },
                ],
            },

标签： htmlwebpacksasssafaricss-loader