วิธีลบ @charset UTF-8 ที่ไม่ต้องการออกจาก CSS (ปรากฏขึ้นหลังจากรวบรวมไฟล์ SASS)

เท่าที่ฉันรู้ @charset รองรับเบราว์เซอร์ทั้งหมดได้เป็นอย่างดี โปรดดูที่: https://developer.mozilla.org/en-US/docs/Web/CSS/@charset พบได้เฉพาะปัญหา "เก่า" เท่านั้น ซึ่งจะเกิดขึ้นเฉพาะเมื่อไม่ได้ประกาศ @charset ที่ตอนต้นของไฟล์ CSS ของคุณ ดูเพิ่มเติม: https://github.com/Compass/compass/issues/211

เมื่อคุณใช้ grunt เพื่อคอมไพล์ไฟล์ SASS ของคุณ คุณสามารถรันงานเพิ่มเติมได้หลังจากงานคอมไพล์ซึ่งจะลบการประกาศ @charset ออก https://github.com/erickrdch/grunt-string-replace สามารถทำการแทนที่ได้ สำหรับคุณ.

นอกจากนี้ ฉันประสบปัญหานี้เมื่อเร็วๆ นี้ เราใช้ gulp-sass เพื่อคอมไพล์ CSS ของเรา จากสิ่งที่ฉันเข้าใจ gulp-sass (ซึ่งใช้ node-sass) ไม่ได้ให้วิธีใด ๆ ในการหยุด @charset "UTF-8"; หากมีอักขระที่ไม่ใช่ ASCII ใน CSS ของคุณ นี่เป็นปัญหาสำหรับเราเพราะเราต้องการใช้ CSS เดียวกันสำหรับหน้า AMP ของเรา ไม่อนุญาตให้ใช้ @charet บนหน้า AMP อ้างถึงปัญหานี้

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

โซลูชันของเรา

สิ่งที่ฉันทำคือเพิ่มงานอึกง่ายๆ เพื่อลบแอตทริบิวต์การเข้ารหัสออกจาก CSS ที่คอมไพล์แล้ว

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*/);
});