title: Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css'
body: <p>I am trying to use <strong>font-awesome 5.1.0</strong> in webpack 4. 
  The content of the webpack configuration file: </p>
  
  <pre><code>const HtmlWebPackPlugin = require("html-webpack-plugin");
  const CopyWebpackPlugin = require("copy-webpack-plugin");
  const path = require("path");
  const autoprefixer = require('autoprefixer');
  
  module.exports = {
    entry: ["./src/index.js", "./src/index.scss", "react-hot-loader/patch"],
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.[hash].js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"]
            }
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: {
                minimize: true
              }
            }
          ]
        },
        {
          test: /\.(sass|scss)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "bundle.css"
              }
            },
            { loader: "extract-loader" },
            {
              loader: "css-loader"
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: () =&gt; [autoprefixer({ grid: false })]
              }
            },
            {
              loader: "sass-loader",
              options: {
                includePaths: ["./node_modules"]
              }
            }
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name][hash].[ext]",
                outputPath: "fonts/"
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./public/index.html",
        filename: "./index.html"
      }),
      new CopyWebpackPlugin([
        {
          from: "public"
        }
      ])
    ]
  };
  </code></pre>
  
  <p>In the index.scss file:  </p>
  
  <pre><code>@import "@fortawesome/fontawesome-free/css/fontawesome.css";
  @import "@material/button/mdc-button.scss";
  @import "@material/drawer/mdc-drawer.scss";
  @import "@material/top-app-bar/mdc-top-app-bar.scss";
  @import "@material/list/mdc-list.scss";
  @import "./App/scss/app.scss";
  
  
  * {
    padding: 0;
    margin: 0;
  }
  
  html, body {
    height: 100%;
    width: 100%;
  }
  
  #root {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
  }
  </code></pre>
  
  <p>As you can on the picture: </p>
  
  <p><a href="https://i.stack.imgur.com/lW6mK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lW6mK.png" alt="enter image description here"></a>  </p>
  
  <p>Font-awesome is imported from the right place but I've got compiler error:</p>
  
  <pre><code>ERROR in ./src/index.scss
  Module not found: Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css' in '/home/developer/Desktop/reasonreact/cockpit/src'
   @ ./src/index.scss
   @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/index.js ./src/index.scss react-hot-loader/patch   
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>Update</strong>  </p>
  
  <p>I changed webconfig to:</p>
  
  <pre><code>  {
      test: /\.(sass|scss)$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "bundle.css"
          }
        },
        { loader: "extract-loader" },
        {
          loader: "css-loader"
        },
        {
          loader: "postcss-loader",
          options: {
            plugins: () =&gt; [autoprefixer({ grid: false })]
          }
        },
        {
          loader: "sass-loader",
          options: {
            includePaths: ["./node_modules", "src", "."]
          }
        }
      ]
    },
  </code></pre>
  
  <p>and I've got the following error:</p>
  
  <pre><code>ERROR in ./src/index.scss
  Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
  NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: require is not defined
      at runLoaders (/home/developer/Desktop/reason-react/cockpit/node_modules/webpack/lib/NormalModule.js:300:13)
      at /home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:364:11
      at /home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:230:18
      at context.callback (/home/developer/Desktop/reason-react/cockpit/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
      at process._tickCallback (internal/process/next_tick.js:68:7)
   @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/index.js ./src/index.scss react-hot-loader/patch
  </code></pre>