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-awesom         


        

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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