CODEWITHSUNDEEP
javascriptnode.jsfontssasswebpack-2
Subsurf
Subsurf

Reputation: 1316

Webpack 2 and SASS: A SASS script can't find its font dependencies when it is @imported to another SASS file

I want to dig into modern frontend development using Webpack 2 and Materialize. Because I might customize the style, I want to @import the Materialize SASS file into my own SASS file, so I can overwrite stuff. However, if I do that, Webpack 2 can't compile my SASS file anymore because it doesn't find the Materialize fonts.

This is my current webpack.config.js, copypasted from all over the internet:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
    filename: "style.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: __dirname + '/public/dist',
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }, {
                        loader: "resolve-url-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=80000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        extractSass
    ]
};

I installed materialize-css via npm. If I put the following in my src/js/index.js file, the compilation works fine:

require('materialize-css/sass/materialize.scss');

I get the desired outputs in my public/dist directory (app.js, style.css and the font files that Materialize provides). But as I said, I want to import Materialize to my own SASS file, which looks something like this (src/scss/main.scss):

@import "~materialize-css/sass/materialize";
// ... overwrite some stuff here ...

Because of to the ~ in front of the filepath, the loader looks for the file in the node_modules directory, thus the materialize.scss file can be imported successfully.

I then have two possibilities to include my SASS file in my Webpack bundle: either change the require() call in my index.js to import that file instead of the materialize.scss file or change the entry key in my webpack.config.js to

entry: [
    './src/js/index.js',
    './src/scss/main.scss'
],

Either way, the compilation fails because Webpack cannot find the font files. This is one of the many errors that occur

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/scss/main.scss
Module not found: Error: Can't resolve '../fonts/roboto/Roboto-Thin.woff2' in 'C:\Users\Myname\Documents\Projects\webpack-test\src\scss'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./~/resolve-url-loader!./src/scss/main.scss 6:75477-75521
 @ ./src/scss/main.scss
 @ multi ./src/js/index.js ./src/scss/main.scss

So this is where I am stuck. Why does the compilation work if I require() the Materialize SASS file directly? Why does it fail when I import the Materialize SASS file to my own SASS file? How do I have to change my Webpack config so that it can find the font files?

Upvotes: 0

Views: 266

Answers (1)

Subsurf
Subsurf

Reputation: 1316

By accident I found out that materialize offers a variable to set the font path, so adjusting my own SASS file to this solved the problem

$roboto-font-path: "~materialize-css/fonts/roboto/" !default;
@import "~materialize-css/sass/materialize";
// ... my customizations ...

Upvotes: 1

Related Questions