9

I use sass for styling in my Angular 6 project, and I now want to be able to use component-specific styling by using styleUrls: ['./filename.scss'] in the Component declaration, instead of only having global sass-files.

So I followed these instructions to get this working in webpack, which works fine except for one thing: font awesome in the CSS content-property. Basically, I have a component with the following SCSS:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";

.myelement {
    &:after {
      @include fa-icon;
      @extend .fas;
      content: fa-content($fa-var-angle-down);
    }
  }

My Webpack looks like this:

module: {
    rules: [
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            use: ['raw-loader', 'sass-loader']
        }, 
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts'
                }
            }]
        },
        ...
    ]
}

This compiles fine with webpack, but I get errors in the browser consoles and the icons are replaced with squares.

In Firefox I get the following error:

downloadable font: rejected by sanitizer 
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1) 
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2

And in Chrome I get:

Failed to decode downloaded font: 
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2

How can I include fonts in my component-specific sass-files?

Federico Grandi
  • 6,785
  • 5
  • 30
  • 50
ShamPooSham
  • 2,301
  • 2
  • 19
  • 28
  • does the fonts have parameters? if so remove it like this https://stackoverflow.com/questions/37429519/font-awesome-silly-error-downloadable-font-rejected-by-sanitizer – Lucho Nov 19 '18 at 22:14
  • @Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can see `font-family: 'Font Awesome 5 Free';`, `content: "\f105";` along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling. – ShamPooSham Nov 20 '18 at 09:32
  • @Luncho I forgot to add to the question that I had set `$fa-font-path` in an included file, so I updated my question to reflect that. – ShamPooSham Nov 20 '18 at 20:07
  • I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file. – Bunyamin Coskuner Nov 22 '18 at 08:06
  • @BunyaminCoskuner Yeah, the SCSS I shared actually belongs to the top level component `app.component.ts` as described in the link in my post. So it's global – ShamPooSham Nov 22 '18 at 08:36
  • do you insist that fontawsome should only included in this component? – molikh Nov 23 '18 at 11:03
  • @molikh I want to include it in the top-level component (`app.component.ts`), which is has the encapsulation mode set to "None", so it's basically global. I don't want to make a new include for each component that will use font-awesome. If there's another way to have some global Sass together with component-specific Sass, that would also be an acceptable solution. – ShamPooSham Nov 23 '18 at 12:22
  • Just to say you need font weight 900 for font awesome 5 too show. – Scott Chambers Nov 28 '18 at 21:59
  • @ShamPooSham Do you have git repo or stackblitz demo to reproduce the problem? – Just code Nov 29 '18 at 05:06
  • @ScottChambers Tried it, didn't help – ShamPooSham Nov 29 '18 at 09:59
  • 1
    @Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now – ShamPooSham Nov 29 '18 at 10:02
  • @ShamPooSham ahh sorry. its normally whats wrong for me. I always forget. – Scott Chambers Nov 29 '18 at 11:55

3 Answers3

1

Have you tried import this

@import '~@fortawesome/fontawesome-free/css/all.css';

and remove

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";

Hope this works!

freepowder
  • 440
  • 2
  • 6
  • Thanks for the suggestion. Sadly, this doesn't work. First of, `all.css` doesn't include scss mixins, variables and functions such as `fa-icon`, `$fa-var-angle-down` and `fa-content`, so I have to change to `content: '\f105'` etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode. – ShamPooSham Nov 22 '18 at 13:11
1

you can use this one.

https://www.npmjs.com/package/angular2-fontawesome

you can include this one in your styles.scss file or in your angular.json file

  "../../node_modules/font-awesome/css/font-awesome.css"

this module has it's own component for fontawsome but you can use it like this too.

<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>

both works

molikh
  • 1,274
  • 13
  • 24
  • Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using `:after` and `:before` pseudo-selectors instead of creating new HTML elements. – ShamPooSham Nov 26 '18 at 15:36
1

Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/

ShamPooSham
  • 2,301
  • 2
  • 19
  • 28