title: Webpack "Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' "
body: <p>I successfully configured webpack for js and sass. It works well until I import font into scss file. I will try to show it in code below.</p>
  
  <p>My webpack config</p>
  
  <pre><code>const path = require('path');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const MinifyPlugin = require('babel-minify-webpack-plugin');
  
  module.exports = {
      optimization: {
          minimizer: [new OptimizeCSSAssetsPlugin({})],
      },
      entry: path.resolve(__dirname + '/public/src/js/adminMain.js'),
      output: {
          path: path.resolve(__dirname + '/public/dist/'),
          filename: 'adminBundle.js'
      },
      module: {
          rules: [{
              test: /\.js$/,
              exclude: /(node_modules)/,
              use: {
                  loader: 'babel-loader',
                  options: {
                      presets: ['@babel/preset-env']
                  }
              },
              test: /\.(sa|sc|c)ss$/,
              use: [{
                      loader: MiniCssExtractPlugin.loader
                  }, {
                      loader: "css-loader",
                  },
                  {
                      loader: "postcss-loader"
                  },
                  {
                      loader: "sass-loader",
                      options: {
                          implementation: require("sass")
                      }
                  }
              ]
          }]
      },
      plugins: [
  
          new MiniCssExtractPlugin({
              filename: "adminBundle.css"
          }),
          new MinifyPlugin()
  
      ]
  
  
  };
  </code></pre>
  
  <p>Admin.scss</p>
  
  <pre><code>// Variables
  @import "./variables/admin.scss";
  @import "./fontawesome.min.css";
  @import "./solid.scss";
  
  ALL OTHER NORMAL CSS.....
  </code></pre>
  
  <p>And this is solid.scss</p>
  
  <pre><code>/*!
   * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
   * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
   */
  @font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../webfonts/fa-solid-900.eot");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
  
  .fa,
  .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; }
  </code></pre>
  
  <p>Well, visual studio code plugin watch-sass can resolve it without problems. But now i am using instead webpack. When I didn't import solid.scss it works well but when I import solid.scss I am starting getting errors probably it cant works with fonts files. But I don't know how to fix it. I will be thankful for any advice.</p>
  
  <p>This is example of error</p>
  
  <pre><code> ERROR in ./public/src/css/admin.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--4-3!./public/src/css/admin.scss)
      Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in 'C:\Users\XXXXXXXXXX\Praca\Webové aplikácie\nodeCMS\public\src\css'
       @ ./public/src/css/admin.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js??ref--4-3!./public/src/css/admin.scss) 5:38-77 6:38-77
  </code></pre>