Cara menghapus @charset UTF-8 yang tidak diinginkan dari CSS (muncul setelah mengkompilasi file SASS)

Ringkasan singkat masalah kami:

  • Kami memiliki deklarasi @charset yang ditambahkan ke file CSS kompilasi kami
  • File SCSS kami tidak memiliki deklarasi ini sehingga ditambahkan selama kompilasi
  • Salah satu rekan kerja saya mengatakan situs kami rusak di Safari jika kami memiliki deklarasi tersebut

Dokumen SASS mengatakan:

Pengkodean Keluaran

Secara umum, Sass akan mencoba mengkodekan stylesheet keluaran menggunakan pengkodean yang sama dengan stylesheet masukan. Namun, agar dapat melakukan hal ini, stylesheet input harus memiliki deklarasi @charset; jika tidak, Sass akan secara default menyandikan stylesheet keluaran sebagai UTF-8. Selain itu, ia akan menambahkan deklarasi @charset ke output jika bukan ASCII biasa.

Ketika stylesheet lain dengan deklarasi @charset @imported, Sass akan mengonversinya ke pengkodean yang sama dengan stylesheet utama.

Sumber: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Adakah yang tahu cara mencegah SASS menambahkannya?
Adakah yang tahu bagaimana kita bisa memeriksa hipotesis ASCII pada semua file SCSS kita?
Ada ide lain?


sass encoding compilation character-encoding
person Andres Diez    schedule 20.05.2014    source sumber
comment
Apakah Anda memiliki karakter UTF-8 di CSS Anda, bahkan di komentar? Versi Ruby dan Sass apa yang Anda jalankan? Apakah Anda menggunakan Kompas; versi yang mana? Rangkaian karakter apa yang Anda harapkan untuk mengkompilasi CSS?   -  person KatieK    schedule 21.05.2014
comment
Apakah Anda kebetulan menggunakan Codekit untuk mengkompilasi SASS? Ketika saya melakukannya, saya juga mendapatkan deklarasi charset di file CSS saya yang telah dikompilasi. Ketika saya mengkompilasinya melalui terminal/dengan gulp saya tidak melakukannya.   -  person Nils Kaspersson    schedule 21.05.2014
comment
@NilsKaspersson Tidak, kami tidak menggunakan Codekit.   -  person Andres Diez    schedule 22.05.2014
comment
@KatieK Kami memiliki karakter di komentar kami seperti ø, ruby ​​2.0.0p451 (24-02-2014 revisi 45167), sass-3.3.7, kami kompilasi dengan Grunt.   -  person Andres Diez    schedule 22.05.2014
comment
apakah kamu sudah menemukan solusinya?   -  person Maksim Vi.    schedule 25.10.2014
comment
Saya tidak akan menghapus ini. Masih penting jika CSS itu di-cache. Ketika browser memuat CSS yang di-cache tanpa deklarasi pengkodean, maka referensi unicode ke font ikon mungkin rusak dan Anda akan melihat bug ...   -  person Michael Heuberger    schedule 25.09.2019

Jawaban (2)


arrow_upward
3
arrow_downward

Sejauh yang saya tahu @charset sangat mendukung semua browser, lihat juga: https://developer.mozilla.org/en-US/docs/Web/CSS/@charset. Hanya masalah "lama" yang dapat ditemukan, yang hanya terjadi jika @charset tidak dideklarasikan di awal file CSS Anda. Lihat juga: https://github.com/Compass/compass/issues/211.

Saat Anda menggunakan grunt untuk mengkompilasi file SASS, Anda dapat menjalankan tugas tambahan setelah tugas kompilasi yang menghapus deklarasi @charset. https://github.com/erickrdch/grunt-string-replace dapat melakukan penggantian untukmu.

person Bass Jobsen    schedule 11.04.2015
comment
Terima kasih, ya, penggantian string akan berhasil untuk saya. Dalam kasus saya, saya memberi stempel header hukum/kontak pada keluaran yang diproses, yang kemudian muncul sebelum deklarasi penyandian... menyebabkan masalah. - person danjah; 26.05.2017

arrow_upward
3
arrow_downward

Ditambah lagi, saya mengalami masalah ini baru-baru ini. Kami menggunakan gulp-sass untuk mengkompilasi CSS kami. Dari apa yang saya pahami gulp-sass (yang menggunakan node-sass) belum menyediakan cara apa pun untuk menghentikan @charset "UTF-8"; jika ada karakter non-ascii di CSS Anda. Ini menjadi masalah bagi kami karena kami ingin menggunakan CSS yang sama untuk halaman AMP kami. @charet tidak diperbolehkan di halaman AMP. Lihat masalah ini.

https://github.com/sass/sass/issues/2288

Solusi Kami

Apa yang saya lakukan adalah menambahkan tugas gulp sederhana untuk menghapus atribut pengkodean dari CSS yang dikompilasi.

gulp.task('amp-sass-clean-up', ['amp-sass' /*Add gulp-sass task that compiles CSS*/], function() {
    return gulp
        .src(['/public/amp.min.css' /*This is the full path and file name to where your final css is*/], {cwd: '/public' /*This is the full path to where final css file is*/)
        .pipe(replace('@charset "UTF-8";', ''))
        .pipe(gulp.dest('/public' /*This is the full path to where final css file is*/);
});
person user3106759    schedule 16.08.2018
comment
Inilah yang saya lakukan untuk masalah yang sama persis. Perhatikan bahwa contoh di atas menggunakan (mungkin) gulp-replace plugin untuk melakukan penggantian . - person Brombardier; 01.11.2019