How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

Question

I have font-awesome in my node_modules folder so I try to import it in my main .scss file like so:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

But Webpack bundling compilation fails, telling me

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot

because the font-awesome.scss file refers to a relative path, '../fonts/'.

How can I tell scss \ webpack to @import another file, and use that file's folder as the home folder so that its relative paths work as it expects?

I don't knows webpack, but do you can put the .eot in `../../node_modules/font-awesome/fonts/fontawesome-webfont.eot`? — BrTkCa, Nov 11 '15 at 12:02
I could do that by altering the font-awesome file, but then I'd lose the changes whenever I update npm, so that's not an option. — Richard, Nov 11 '15 at 12:09
I am using the npm for font-awesome sass loader. did you use a different one? — Winnemucca, Mar 09 '17 at 06:49

score 142 · Answer 1 · edited Apr 19 '20 at 09:47

142

Use

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

where the $fa-font-path variable is seen in font-awesome/scss/_variables.scss

$fa-font-path: "../fonts" !default;

The tilde "~" is interpolated by sass-loader using the webpack mecanism.

edited Apr 19 '20 at 09:47

Community

1
1

answered Dec 19 '15 at 03:25

user137794

1,636
2
10
11

11

Doesn't work for me, it compile but I just get rectangle in my website... :/ – Donovan Charpin Feb 21 '16 at 22:56
1

I had to set mine as `$fa-font-path: "font-awesome/fonts"` - i.e. without the tilde. – ctrlplusb Apr 25 '16 at 10:32
3

Could you explain a bit more precisely where you edit what? I don't understand this answer – Richard Aug 18 '16 at 14:01
@Richard were you able to get this working for you? Also, please mark this as the answer! – Ascherer Nov 12 '16 at 23:14
No, I used my answer below at the time. – Richard Nov 14 '16 at 08:42
The ~ was the secret sauce as my modules were in node_modules and the sass-loader was configured for them via include paths i.e., ```JSON options: { sassOptions: { includePaths: [ "node_modules" ] } ``` – Robb Vandaveer Sep 10 '20 at 14:55
@RobbVandaveer Could you please precisely where do I need to add this? Do I need to add this to webpack.config.js in root? Any reference link? – Sadee Oct 29 '20 at 00:37
Hi @Sadee, I'm sorry for the late response, I guess I haven't been on SO in a while. The tilde prefixes the paths used as references in your SCSS. – Robb Vandaveer Nov 11 '20 at 18:51
This worked, but for parcel I had to use `$fa-font-path: '../node_modules/font-awesome/fonts';` – James Gentes Mar 08 '21 at 00:24

score 32 · Accepted Answer · edited Sep 11 '19 at 12:24

32

There doesn't appear to be any way to @import files that have their own relative paths in SCSS \ SASS.

So instead I managed to get this to work:

Import the scss \ css font-awesome file in my .js or .jsx files, not my stylesheet files:
```
import 'font-awesome/scss/font-awesome.scss';    
```
Add this to my webpack.config file:

    module:
    {
        loaders:
        [
            {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},         
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    }

edited Sep 11 '19 at 12:24

Rudy

158
9

answered Nov 11 '15 at 12:15

Richard

14,798
21
70
103

How do you handle a different font path? I mean you import the scss there but you cannot change the path to your font-files, e.g. if you need to change it for production and the fonts are found in a different folder. Any ideas? Thats what I need to do. – LordTribual Dec 13 '15 at 12:37
I haven't got to altering stuff for production yet. I imagine I'd just copy everything over from my local build and leave the paths alone. Otherwise maybe look at the **output** section of **webpack.config.js** and see if you can change paths. Or just add a post build step in your **package.json** scripts section. – Richard Dec 13 '15 at 16:44
2

Got it working. I changed the path for the loader and now its loading the fonts from the specified path. – LordTribual Dec 14 '15 at 10:38
You don't need to include the font-awesome scss file in the javascript. You can still include it in your scss, as long as you set the font path like user137794 suggests, then update the webpack.config file to account for font types as you suggest. – Dave Lancea Mar 24 '16 at 14:02
Which npm did you use? I am using the sass font awesome loader and having no success. – Winnemucca Mar 09 '17 at 06:52
don't forget to add *-loader suffix (the loaders for .scss files). Leaving it without -loader suffix is not longer allowed. Check https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed – Rudy Sep 11 '19 at 11:59

score 21 · Answer 3 · answered Dec 05 '16 at 14:34

Following worked for me:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

This is to import the font-awesome & required fonts in the project. Other change is in webpack configurations, to load required fonts using file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}

Muhammad · Answer 4 · 2020-11-17T06:15:31.503

20

This is how it worked for me, the trick is to set $fa-font-path to the path of the fonts as following.

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

Note: Please check your fonts folder in node_modules in my case it is @fortawesome/fontawesome-free

edited Nov 17 '20 at 06:15

answered Dec 16 '19 at 13:51

Muhammad

6,725
5
47
54

1

@Muhammed Actually, it is a bit tricky to load webfonts like this. When you compile sass to css, according to your way of compiling, your fonts may not be compiled. You can copy the webfonts folder directly to your public/ folder next to your css folder. In this way, font awesome css code will find the fonts and you will be on the safe side. – Mycodingproject Feb 01 '20 at 21:56
This is what I thought I was doing. but what it turned out I was missing was the trailing directory separator at the end. (I had `$fa...: "~@fort..../webfonts";` when apparently it is fully required to have a trailing forward slash: `$fa...: "~@fort..../webfonts/";`) couldn't figure out why my otherwise working conifg was missing fonts from font awesome until I saw your answer here @Muhammad – Sampson Crowley Aug 09 '21 at 05:04

score 12 · Answer 5 · answered Mar 27 '17 at 10:04

12

Resolved by changing my app.scss:

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

This way is useful to keep external dependencies unchanged and unversioned.

answered Mar 27 '17 at 10:04

Wilk

7,873
9
46
70

2

You could avoid line 1 and use ` !default` on line 2 end. – Nighto May 19 '17 at 21:09
It's a shame that I can't get this method to work because it would mean that I didn't have to change the `_variables.scss` file every time I recompiled the project. It doesn't override `$fa-font-path` or any other variable for that matter.. so not sure how you were able to do it_ – jesus g_force Harris Nov 04 '17 at 21:01

score 7 · Answer 6 · answered Dec 06 '17 at 06:25

7

I just set the path in my main scss file and it works :

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

answered Dec 06 '17 at 06:25

ramon22

3,528
2
35
48

Excellence Ilesanmi · Answer 7 · 2018-07-14T09:59:56.923

What worked for me was to add resolve-url-loader and enable sourceMaps

I already imported font-awesome in my root .scss file:

@import "~font-awesome/scss/font-awesome";
...

This root file is imported in my main.js file defined as Webpack's entrypoint:

import './scss/main.scss';
...

Then my final webpack module rules look like so:

 ...
 {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { loader: 'postcss-loader', options: { sourceMap: true }, },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true }, },
    ],
  }, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: { limit: 1000, name: 'fonts/[name].[ext]', },
  }
  ...

Note:

I used mini-css-extract-plugin, which can be registered like this:

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),

url-loader requires file-loader to be installed, so if you get an error like: cannot find module file-loader, then just install it:

npm i -D file-loader

Useful Links:

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

score 3 · Answer 8 · edited Sep 10 '20 at 06:47

3

For Version 5.14, the following worked for me:

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

edited Sep 10 '20 at 06:47

fcdt

2,371
5
14
26

answered Sep 09 '20 at 14:38

sdvlpr

39
2

score 0 · Answer 9 · answered Apr 17 '18 at 09:29

v.4 (symofony 4 + webpack)

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';

How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?

9 Answers9

Linked