CODEWITHSUNDEEP
webpacksassfont-awesome
Denis
Denis

Reputation: 172

Troubles with Webpack, SASS, and FontAwesome

I have a big project, hosted on Google Cloud App Engine and now I am experiencing some troubles with Webpack. I use Webpack to compile TypeScript and at the same time to compile several SASS files with the following configuration:

{
    test: /\.sass$/,
    exclude: /node_modules/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                url: false,
            }
        },
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        ["postcss-preset-env",],
                    ],
                },
            },
         },
         "sass-loader"
     ],
},

It works pretty cool, but sometimes my FontAwesome looks like this:

Corrupted icons example (screenshot)

These icons get corrupted very rarely (even when I don't change files themselves, so it looks like it depends on the network).

In SASS files I have FontAwesome classes with Unicode escape-sequences, but Webpack compiles them straight into regular characters:

Compiled CSS expample screenshot

FontAwesome is loaded by @font-face rule and it uses font-display: block:

@font-face
    font-family: 'FontAwesome'
    font-display: block
    src: url('/fonts/fa/fa.woff2?v=4') format("woff2"), url('/fonts/fa/fa.woff?v=4') format("woff"), url('/fonts/fa/fa.ttf?v=4') format("truetype")

Does anybody know why my FontAwesome might get corrupted (especially so periodically)? Is it because something happens to the encoding during the network transfer? Can I just make Webpack to not process Unicode escape-sequences?

Upvotes: 5

Views: 767

Answers (2)

user3661557
user3661557

Reputation: 168

Solution is to use the sass unquote function to your content. Example: content: unquote('"\\e949"');

which will give you the following output in your css after webpack build: content: "\e949";

Upvotes: 2

Yegorich_555
Yegorich_555

Reputation: 63

To fix: with webpack use css-unicode-loader

Explanation: looks like Chrome (maybe other browsers) has bug and sometimes doesn't render font-icons when it's converted from sass/scss to css (from escape-string to utf8):

.foo {
  &:before{
    content:"\e949"
  }
}

To

.foo {
  &:before{
    content:"" // it's issue
  }
}

Related discussion here

Upvotes: 4

Related Questions