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