css-loader 正在对生成的 url() 中的引号进行编码

Question

我的配置如下：

// webpack.config.

{
    test: /\.pug$/,
    exclude: /node_modules/,
    use: "pug-loader"
},

{
    test: /\.scss$/,
    exclude: /node_modules|_.+.scss/,
    use: [
        {
            loader: "css-loader",
            options: {
                modules: {
                    mode: "local",
                    localIdentName:
                        process.env.NODE_ENV === "development"
                            ? "[local]"
                            : "[hash:base64]"
                },
                sourceMap: process.env.NODE_ENV === "development" ? true : false
            }
        },
        "postcss-loader",
        "sass-loader"
    ]
}

// index.pug

style(type="text/css")
    =require("../styles/styles.module.scss")

// styles.module.scss

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z' fill='%23555'/%3E%3C/svg%3E");

问题是在编译的 css 代码中，引号被编码，因此这是我得到的：

content: url(&quot;data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z' fill='%23555'/%3E%3C/svg%3E&quot;);

对如何自动解码引号有什么想法吗？

更新： 显然这通常发生在引号中，因此：

content: '';
// or
content: "";

变为：

content: &quot;

Answer 1

刚刚发现，罪魁祸首是哈巴狗而不是 css-loader。

因为我像这样内联生成的样式：

style(type="text/css")
    =require("../styles/styles.module.scss")

根据文档，哈巴狗逃脱了 css：

By default, all attributes are escaped—that is,special characters are replaced with escape sequences—to prevent attacks (such as cross site scripting).

解决方案在文档的下一行中进行了解释：

If you need to use special characters, use != instead of =.

因此包括这样的样式：

style(type="text/css")
    !=require("../styles/styles.module.scss")

已解决问题。

css-loader 正在对生成的 url() 中的引号进行编码

css-loader is encoding quotes inside generated url()

css

webpack

css-loader