Konfigurasi saya adalah sebagai berikut:

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

Masalahnya adalah bahwa dalam kode css yang dikompilasi, tanda kutip dikodekan, jadi inilah yang saya dapatkan:

content: url("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");

Adakah ide bagaimana memecahkan kode tanda kutip secara otomatis?

PERBARUI: Rupanya ini terjadi dengan kutipan secara umum, maka:

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

Menjadi:

content: "
0
Sal 7 Agustus 2019, 09:15

1 menjawab

Jawaban Terbaik

Baru tahu, pelakunya pug dan bukan css-loader.

Karena saya memasukkan gaya yang dihasilkan sebaris seperti:

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

Pug lolos dari css sesuai dokumentasi:

Secara default, semua atribut di-escape—yaitu, karakter khusus diganti dengan escape sequence—untuk mencegah serangan (seperti skrip lintas situs).

Solusi dijelaskan di baris dokumentasi berikutnya:

Jika Anda perlu menggunakan karakter khusus, gunakan != daripada =.

Dengan demikian termasuk gaya seperti:

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

Memperbaiki masalah.

1
Sal 9 Agustus 2019, 05:49