Why does Sass prepend an incorrect @charset rule?

Question

I use

sass --watch scss:css

to have Sass automatically create CSS files (and put them in the /css directory) for each SCSS file (from my /scss directory).

In my SCSS file I have this:

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

When I test the web page in the browser, that "play" character is not displayed - instead I see a bunch of weird letters with carons and other accents.

I inspected the generated CSS file and noticed this in the first line:

@charset "CP852";

I then manually changed that to this:

@charset "UTF-8";

which resulted in my "play" button being rendered correctly.

Now, why does Sass set the charset to "CP852"? I'm writing the SCSS file in PhpStorm which reports that the SCSS file indeed is UTF-8 encoded (I see that in the status bar of PhpStorm).

Answer 1

Like @Alireza-Fatahi states in this answer, you could save a line in CSS output and instead go for a default Charset on external files, by adding this line to your config.rb in your project folder:

Encoding.default_external = "UTF-8"

Answer 2

Try adding @charset "UTF-8"; to your original SCSS file, SASS shouldn't override it/add its own then.