SASS compile fontawesome 保留符号答案

【问题标题】：SASS compile fontawesome preserve notationSASS compile fontawesome 保留符号
【发布时间】：2022-04-07 02:26:51
【问题描述】：

当我使用 sass 3.4.1 将 fontawesome.scss 编译为 css 文件时

$fa-var-music: "\f001"; 
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }

编译成

.fa-music:before {
  content: "";
}

由于我主要在我的项目中使用 Win1252 编码，我想知道在 css 文件中保留“\f001”的方法是什么。 SASS 为什么要重写？

【问题讨论】：

\f001 从字面上生成代码点 F001（十六进制）处的字符，这在 Windows-1252 中无效。你想塑造什么角色？
不知道为什么，但值得注意的是，Sass 在执行此操作时也会注入字符集信息：@charset "UTF-8";（请参阅：sassmeister.com/gist/4c326a38bf0457f120db）。
@ljacqu 我不尝试自己制作角色。我想使用 font awesome 提供的字符。我担心 - 当文件包含 unicode 字符时 - 某些浏览器可能无法正确呈现 fa 符号。

标签： sass font-awesome

【解决方案1】：

从 Sass 3.4.0 changelog 中提取： Sass 现在遵循 CSS Syntax Level 3 规范来确定样式表的编码。此外，它现在只发出 UTF-8 CSS，而不是尝试匹配源编码。

现在没有办法使用旧方法

Issue 在 SASS 回购

对我来说，回滚到 SASS 3.3.14 来解决这个问题

【讨论】：

由于 SASS 在第一行正确输出@charset "UTF-8";，只要生成的文件没有与其他 css 文件合并并且不是第一个文件，就没有真正的问题。
我只是做了$fatag: "\f02b";（添加引号）并为我修复了它。无需恢复到 3.3.14。
我使用的是 4.2.0。我已将@charset "UTF-8" 添加到 _variables 文件的顶部，但是所有 UTF/PUA 字符代码都已经在双引号中，但我仍然得到相同的时髦形状。有没有人有进一步的信息？
顺便说一句。我有一个旧版本的 yui 压缩机正在运行。与此同时，情况发生了变化。 @charset "UTF-8" 现在被拉到合并和压缩的 css 文件的最顶部，因此可以正确解析和使用。

【解决方案2】：

如果您使用 Gulp 编译 CSS，您可以安装这个 gulp 插件，它会自动为您解决问题。无需更改 Sass 代码。

https://www.npmjs.com/package/gulp-sass-unicode

var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');

gulp.task('sass', function(){
  gulp.src('style.scss')
    .pipe(sass())
    .pipe(sassUnicode()) // << This line is what does the magic
    .pipe(gulp.dest( "css/" ));
});

【讨论】：