Почему Sass добавляет неправильное правило @charset?

я использую

sass --watch scss:css

чтобы Sass автоматически создавал файлы CSS (и помещал их в каталог /css) для каждого файла SCSS (из моего каталога /scss).

В моем файле SCSS у меня есть это:

.foo::before {
    content: "▶";
}

Когда я тестирую веб-страницу в браузере, этот символ «игры» не отображается — вместо этого я вижу кучу странных букв с каронами и другими акцентами.

Я просмотрел сгенерированный файл CSS и заметил это в первой строке:

@charset "CP852";

Затем я вручную изменил это на это:

@charset "UTF-8";

что привело к тому, что моя кнопка «воспроизведение» отображалась правильно.

Теперь, почему Sass устанавливает кодировку "CP852"? Я пишу файл SCSS в PhpStorm, который сообщает, что файл SCSS действительно имеет кодировку UTF-8 (я вижу это в строке состояния PhpStorm).


css sass phpstorm character-encoding
person Šime Vidas    schedule 28.04.2012    source источник
comment
Что произойдет, если вы используете его экранированную нотацию: \25B6?   -  person Knu    schedule 28.04.2012
comment
+1 Вау! Я понятия не имел, что content: "\25B6" работает. :) Однако вопрос в том, почему SASS устанавливает неверную кодировку, поэтому я не могу принять этот ответ.   -  person Šime Vidas    schedule 28.04.2012
comment
Кроме того, использование экранированной нотации НЕ является хорошим выбором, потому что вы видите неправильное отображение символов ИЗ-ЗА неправильной кодировки, что означает, что вы не решили эту проблему для всех других символов в неправильной кодировке, что потенциально является ОГРОМНОЙ проблемой, когда она приходит к локализации. Лучше исправьте эту проблему в источнике, а не взламывайте ее: явное определение набора символов для исключенного ответа.   -  person dudewad    schedule 17.03.2014
comment
@dudewad Я перешел на Stylus. Мой CSS-код веб-шрифта (из Fontello) использует какой-то \e-основанный escapement, например. .icon-star:before { content: '\e800'; }. Кажется, работает нормально без какой-либо явной настройки UTF-8.   -  person Šime Vidas    schedule 17.03.2014

Ответы (2)


arrow_upward
31
arrow_downward

Попробуйте добавить @charset "UTF-8"; к исходному файлу SCSS, тогда SASS не должен переопределять его/добавлять свой собственный.

person Blair McMillan    schedule 15.05.2012
comment
Кажется, что @charset "UTF-8" должно быть в первой строке таблицы стилей. - person feklee; 24.01.2013
comment
Цитата из SASS_REFERENCE: Добавить кодировку @charset- имя; в начале таблицы стилей (перед любыми пробелами или комментариями), и Sass интерпретирует это как заданную кодировку. - person feklee; 24.01.2013
comment
Это тоже была моя проблема, у меня был комментарий выше. Помещение его в первую строку исправило это, ура. - person ConorLuddy; 14.01.2014
comment
Это вызывает проблему с параметром banner, который ставится первым в сценарии. - person kaiser; 26.05.2014
comment
Спасибо! Очень странно, что они не принимают UTF-8 по умолчанию. Кому в наши дни захочется обрабатывать специальные символы в Latin-1? - person wortwart; 06.01.2015
comment
Добавление объявления @charset в SCSS будет включено в CSS, только если файл CSS содержит какие-либо символы, отличные от ASCII. В сжатом режиме вместо объявления @charset будет добавлена ​​спецификация UTF-8. - person Herr_Schwabullek; 19.02.2015

arrow_upward
5
arrow_downward

Как утверждает @Alireza-Fatahi в этом ответе, вы можете сохранить строку в выводе CSS и вместо этого перейти к Charset по умолчанию для внешних файлов, добавив эту строку в ваш config.rb в папке проекта:

Encoding.default_external = "UTF-8"
person Volker E.    schedule 17.06.2014