Understanding Webpack SASS loader and file paths

Question

I got some troubles to understand how the file path resolution works. I am using both CSS and SASS loaders in a standard way:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module: {
    loaders: [
        { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
    ]
},
plugins: [
    new ExtractTextPlugin('build/[name].min.css', {
        allChunks: true
    })
]

So, I expect all my SASS to be compiled and render in build/app.min.css file. It works well. Except I got issues with fonts loading and includes.

Let's consider I work on a /src/sass/style.scss file, and I want to include the font-awesome SASS file as following:

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

It doesn't work. Yet, if I use a relative path such as:

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

It works.

Then, I want to change the font-awesome font path to match correct folder:

$fa-font-path: '~font-awesome/fonts';

It also works. Which seems logical to me, as, as far as I understood the concept, the ~ refers to the node_modules folder.

So, why does it work with the font path and not with the SASS import? I would like to use ~ notation too, as this is a file used by several projects, some of them requiring a ../../../node_modules.

Thanks for your help! :)

Hi Jonathan, did you find a solution ? It seems that sass define a :load_paths option (sass-lang.com/documentation/…) but i couldn't figure out how to use it with the extract plugin — Samuel Maisonneuve
Actually, the options seems to be includePaths from node-sass (github.com/sass/node-sass). So it seems that we can use it with the extract plugin like so : { loader: "sass-loader", query: { includePaths: [srcDir], }} — Samuel Maisonneuve

Nick Res Nick Res · Accepted Answer · 2016-12-14T21:56:05

wow, you write the article that made my life much easier on Webpack, and I have the privilege of helping you out in return.

I think the issue here is that the first argument being used with ExtractTextPlugin isn't supposed to specify the file path, just the file location.

So you can try changing that to just [name].min.css and specify the output location elsewhere.

Understanding Webpack SASS loader and file paths

1 Answers