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?
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With