Webpack 正在从 Sass 中的我的 url("img/image.jpg") 中剥离引号我怎样才能保留报价？

问题描述

这是我 Sass 的一部分：

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

Webpack processes and then outputs the background without the quotes around the path in url().

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

然而，这是我的 Sass 的另一部分：

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

The same behaviour is seen here,where Webpack strips the quotes in the output CSS file.

在这里，我使用 CSS 变量在暗模式或亮模式下加载正确的徽标图像。因此，屏幕截图显示 Safari 14 尝试转义特殊字符，因此未呈现任何内容。

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

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

我试过没有成功：

• 将 URL 包裹在 Sass quote() 函数周围。
• 使用此转义引号：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",],

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）