Webpack Sass-loader relative path

Question

I have an issue where I import font awesome into my main scss file using @import. The issue is font awesome _varibles.scss uses a relative path to import its fonts ../fonts/*. This is causing an error because webpack is trying to load the file relative to the entry point which is the main sass file. I have been trying to use options such as includePaths with no luck and loaders like resolve-url-loader. I have tried multiple paths but no joy. the main.scss file is located in the sass folder along with a vendor folder that holds the font awesome data.

                test: /\.scss$/,
                use: [{
                        loader: "style-loader"
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'resolve-url-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            includePaths: [
                                path.resolve(__dirname, "assets/css/vendor/fontawsome/scss")
                            ]
                        }
                    }
                ]

Answer 1

The issue isn't related to the fact that you misspelled fontawesome in your path?

"assets/css/vendor/fontawsome/scss"