為什么我的SASS編譯的CSS每行都出現一個BOM？

我的CSS沒有工作，顯然是因為每一行都以字節順序標記(BOM)開始。Chrome的開發控制臺將每個BOM顯示為一個紅點，當我將鼠標放在上面時，它會顯示\ufeff。

Chrome Console

為什么這些BOM會在這里，我該如何擺脫它們？

如果您的文件中有任何UTF8內容，則可以顯示BOM表。特別是，Sass會將實體轉換為壓縮模式下的原始UTF8字符，然后添加相應的BOM。示例:

/* adds a bullet character to the element */
.blank::before {
    content: "\2022";
}

解決方案:

如果直接用Sass編譯，可以使用- no-charset選項，這樣不會添加BOM。如果你像我一樣使用gulp-sass，它不支持這個選項。因此，您可以安裝gulp-stripbom npm包，然后添加。管道(stripBom())進行編譯。您的SASS源文件可能是混亂的。在我的例子中，源文件不知何故在開頭有兩個BOMs和SASS(出于某種原因？)在每個CSS聲明的開頭把它翻譯成一個BOM。

Double BOM in broken SASS