title: Error while importing font or images file inside scss using Webpack 4 and react js
body: <p>I am using webpack and react js.
  I am getting this error when i try to import image or font file inside my scss file.</p>
  
  <p>I have tried many solutions but none of them solved my problem,</p>
  
  <p>webpack.common.js
  <a href="https://i.stack.imgur.com/UuHdS.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  
  <pre><code>const path = require("path");
  var HtmlWebpackPlugin = require("html-webpack-plugin");
  
  module.exports = {
    entry: {
      main: "./src/index.js",
      vendor: "./src/vendor.js"
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: ["html-loader"]
        },
        {
          test: /\.(ttf|svg|png|jpg|gif)$/,
          use: {
            loader: "file-loader",
            options: {
              name: "[name].[hash].[ext]",
              outputPath: "imgs"
            }
          }
        }
      ]
    }
  };
  </code></pre>
  
  <p>Here is another webpack.dev.js</p>
  
  <pre><code>module.exports = merge(common, {
    mode: "development",
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/template.html"
      })
    ],
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            "style-loader", //3. Inject styles into DOM
            "css-loader", //2. Turns css into commonjs
            "sass-loader" //1. Turns sass into css
          ]
        }
      ]
    }
  });
  </code></pre>
  
  <p>ERROR in ./src/assets/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/assets/index.scss)
  Module not found: Error: Can't resolve '../../../src/assets/fonts/icomoon.ttf' in 'C:\Users\jamal\Documents\webpack-demo-app\src\assets'
   @ ./src/index.js
   @ multi (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> ./src/index.js</p>