title: Webpack 2 and SASS: A SASS script can't find its font dependencies when it is @imported to another SASS file
body: <p>I want to dig into modern frontend development using Webpack 2 and Materialize. Because I might customize the style, I want to <code>@import</code> 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.</p>
  
  <p>This is my current <code>webpack.config.js</code>, copypasted from all over the internet:</p>
  
  <pre><code>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&amp;mimetype=application/font-woff'
              },
              {
                  test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  loader: 'file-loader'
              }
          ]
      },
      plugins: [
          extractSass
      ]
  };
  </code></pre>
  
  <p>I installed <code>materialize-css</code> via npm. If I put the following in my <code>src/js/index.js</code> file, the compilation works fine:</p>
  
  <pre><code>require('materialize-css/sass/materialize.scss');
  </code></pre>
  
  <p>I get the desired outputs in my <code>public/dist</code> directory (<code>app.js</code>, <code>style.css</code> 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 (<code>src/scss/main.scss</code>):</p>
  
  <pre><code>@import "~materialize-css/sass/materialize";
  // ... overwrite some stuff here ...
  </code></pre>
  
  <p>Because of to the <code>~</code> in front of the filepath, the loader looks for the file in the <code>node_modules</code> directory, thus the <code>materialize.scss</code> file can be imported successfully.</p>
  
  <p>I then have two possibilities to include my SASS file in my Webpack bundle: either change the <code>require()</code> call in my <code>index.js</code> to import that file instead of the <code>materialize.scss</code> file or change the <code>entry</code> key in my <code>webpack.config.js</code> to</p>
  
  <pre><code>entry: [
      './src/js/index.js',
      './src/scss/main.scss'
  ],
  </code></pre>
  
  <p>Either way, the compilation fails because Webpack cannot find the font files. This is one of the many errors that occur</p>
  
  <pre><code>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
  </code></pre>
  
  <p>So this is where I am stuck. Why does the compilation work if I <code>require()</code> 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?</p>