CODEWITHSUNDEEP
node.jssassnpmfont-awesomewebpack
Richard
Richard

Reputation: 16742

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

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?

Upvotes: 93

Views: 73647

Answers (10)

Shashank Bhatt
Shashank Bhatt

Reputation: 857

Even after reading all answers, I did not copy anything but just read and still not working until i realized the scope name is @fortawesome and not @fontawesome.

So it will be

// to configure font path is necessary before importing scss
 $fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';

 @import "~@fortawesome/fontawesome-free/scss/fontawesome";

//and so on .. for other scss

Upvotes: 1

Muhammad
Muhammad

Reputation: 7324

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

Upvotes: 22

sdvlpr
sdvlpr

Reputation: 49

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";

Upvotes: 4

user137794
user137794

Reputation: 1721

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.

Upvotes: 144

Richard
Richard

Reputation: 16742

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"},
        ]
    }

Upvotes: 33

Excellence Ilesanmi
Excellence Ilesanmi

Reputation: 3525

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

Upvotes: 7

Koudi
Koudi

Reputation: 112

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';

Upvotes: 0

ramon22
ramon22

Reputation: 3618

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';

Upvotes: 8

Wilk
Wilk

Reputation: 8113

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.

Upvotes: 13

Yogesh Agrawal
Yogesh Agrawal

Reputation: 982

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'
}

Upvotes: 22

Related Questions