CODEWITHSUNDEEP
csswebpacksasswebfontssass-loader
Robb Vandaveer
Robb Vandaveer

Reputation: 1511

SCSS Webfont (Font Awesome) Compilation Corruption Using Webpack

When compiling font content declarations in SCSS, the output is getting corrupted. Instead of outputting the character escape sequence as I would expect e.g., content: \f26e;, the sass-loader is outputting a single undisplayable character, represented as a square e.g., content: ""; The characters can be found both in the js bundle as well as the extracted CSS.

You can see clearly in the CSS that comes down with the Font Awesome node package of how it should be written to the file

.fa-500px:before {
  content: "\f26e"; }

How it gets written to my file

.fa-500px:before {
  content: "";
}

I was attempting to build styles off of Font Awesome styles when I discovered the issue. I decided to just try to recompile Font Awesome but the issue persisted there too. I have searched around and haven't found any resources that indicate that I'm doing it wrong, but that's my assumption and not that there is something wrong with the Webpack sass-loader.

I have created a repo that demonstrates the issue: https://github.com/rlvandaveer/sass-loader-fontawesome-gist

Upvotes: 1

Views: 947

Answers (1)

Robb Vandaveer
Robb Vandaveer

Reputation: 1511

Digging into this more I've determined that this is not actually an issue. The two cases above are equivalent. The first is an ASCII escape code and the second is the corresponding literal unicode character (which isn't rendered properly). The example repo uses the dart sass implementation which operates differently than the node-sass implementation which I was accustomed to. This dart-sass issue confirms the difference between the two implementations.

Hopefully this answer will save someone from similar n00by confusion.

Upvotes: 1

Related Questions