css-loader 在生成的 url() 中编码引号答案

【问题标题】：css-loader is encoding quotes inside generated url()css-loader 在生成的 url() 中编码引号
【发布时间】：2019-08-07 06:15:27
【问题描述】：

我的配置如下：

// 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;

【问题讨论】：

标签： css webpack css-loader

【解决方案1】：

刚刚发现，罪魁祸首是 pug 而不是 css-loader。

因为我像这样将生成的样式包含在内：

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

pug 根据文档转义了 css：

默认情况下，所有属性都被转义——即特殊字符被转义序列替换——以防止攻击（例如跨站点脚本）。

解决方案在下一行文档中进行了说明：

如果您需要使用特殊字符，请使用 != 而不是 =。

因此包括这样的样式：

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

修复了问题。

【讨论】：