title: 404 (Not Found) SCSS with Webpack
body: <p>Webpack throws an error</p>
  <pre><code>GET http://localhost:8080/sass/main.scss net::ERR_ABORTED 404 (Not Found)
  </code></pre>
  <p>but at start server it loaded page with css.
  scss imported to js with</p>
  <pre><code>import '../sass/main.scss';
  </code></pre>
  <p>webpack config:</p>
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
   entry: './src/js/controller.js',
  
   plugins: [
    new HtmlWebpackPlugin({
    template: './index.html',
   }),
  ],
  module: {
   rules: [
    {
      test: /\.html$/i,
      use: ['html-loader'],
    },
    {
      test: /\.s[ac]ss$/i,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    },
    ],
   },
  }
  </code></pre>
  <p>Head part of index.html template: link to css here doesn't influence at all, only import inside js</p>
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html lang=&quot;en&quot;&gt;
   &lt;head&gt;
   &lt;meta charset=&quot;UTF-8&quot; /&gt;
   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial- 
    scale=1.0&quot; /&gt;
   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
   &lt;link
    href=&quot;https://fonts.googleapis.com/css? 
    family=Nunito+Sans:400,600,700&quot;
    rel=&quot;stylesheet&quot;
   /&gt;
   &lt;link rel=&quot;shortcut icon&quot; href=&quot;/src/img/favicon.png&quot; 
    type=&quot;image/x-icon&quot; /&gt;
   &lt;link rel=&quot;stylesheet&quot; href=&quot;/src/saas/main.css&quot; /&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;script type=&quot;module&quot; src=&quot;/src/js/controller.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  <p>What could be going wrong?</p>