如何从 CSS 中删除不需要的 @charset "UTF-8"（编译 SASS 文件后显示）答案

【问题标题】：How to remove unwanted @charset "UTF-8" from CSS (shows up after compiling SASS files)如何从 CSS 中删除不需要的 @charset "UTF-8"（编译 SASS 文件后显示）
【发布时间】：2014-05-20 12:50:22
【问题描述】：

快速总结我们的问题：

我们在编译后的 CSS 文件中添加了 @charset 声明
我们的 SCSS 文件没有此声明，因此它会在编译期间添加
我的一位同事说，如果我们有该声明，我们的网站会在 Safari 中中断

SASS 文档说：

输出编码

一般来说，Sass 会尝试使用与输入样式表相同的编码对输出样式表进行编码。但是，为了做到这一点，输入样式表必须有一个@charset 声明；否则，Sass 将默认将输出样式表编码为 UTF-8。此外，如果不是纯 ASCII，它会在输出中添加一个 @charset 声明。

当其他带有@charset 声明的样式表被@imported 时，Sass 会将它们转换为与主样式表相同的编码。

来源：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

有谁知道防止 SASS 添加它的方法吗？
有谁知道我们如何检查所有 SCSS 文件的“如果不是纯 ASCII”假设？
还有其他想法吗？

【问题讨论】：

您的 CSS 中是否有任何 UTF-8 字符，即使在 cmets 中也是如此？你运行的是什么版本的 Ruby 和 Sass？你在使用指南针吗？哪个版本？您希望 CSS 编译成什么字符集？
您是否偶然使用 Codekit 编译 SASS？当我这样做时，我也会在我编译的 CSS 文件中得到一个字符集声明。当我通过终端/使用 gulp 编译它时，我没有。
@NilsKaspersson 不，我们不使用 Codekit。
@KatieK 我们的 cmets 中有字符，例如 ø、ruby 2.0.0p451（2014-02-24 修订版 45167）、sass-3.3.7，我们正在使用 Grunt 进行编译。
你找到解决办法了吗？

标签： encoding character-encoding compilation sass

【解决方案1】：

此外，我最近遇到了这个问题。我们使用 gulp-sass 来编译我们的 CSS。据我了解，gulp-sass（使用 node-sass）没有提供任何方法来阻止 @charset "UTF-8"; 如果您的 CSS 上有非 ascii 字符。这对我们来说是个问题，因为我们想为我们的 AMP 页面使用相同的 CSS。 AMP 网页上不允许使用 @charet。参考这个问题。

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

我们的解决方案

我所做的是添加一个简单的 gulp 任务以从编译的 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*/);
});

【讨论】：

这正是我为完全相同的问题所做的。请注意，上面的示例使用（大概）gulp-replace plugin 来执行替换。

【解决方案2】：

据我所知@charset 很好地支持所有浏览器，另请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/@charset。只能找到“旧”问题，只有在 CSS 文件开头未声明 @charset 时才会发生这种情况。另见：https://github.com/Compass/compass/issues/211。

当您使用 grunt 编译您的 SASS 文件时，您可以在删除 @charset 声明的编译任务之后运行一个附加任务。 https://github.com/erickrdch/grunt-string-replace可以为您代劳。

【讨论】：

谢谢，是的，字符串替换对我有用。在我的情况下，我在处理的输出上标记了一个法律/联系人标题，然后出现在编码声明之前......导致问题。