title: Can't bundle sass and handlebars - webpack config
body: <p>I'm running a very small application in node, and I'm using <code>webpack</code> to bundle my js with handlebars, meanwhile I was using <code>gulp</code> to proccess my sass file to css.</p>
  
  <p>When I removed the handlebars code from the main html file and put it in a .hbs file, to require from mainjs and them call only a single js file in the html, my css seems not to reach the .hbs html code, so I tried to bundle sass file alltogheter with webpack as well, but then I got errors in main js file that can't read the css.</p>
  
  <p>This is my webpack.config.js</p>
  
  <pre><code>  var path = require("path");
  
    module.exports = {
      mode: "development",
      entry: {
        js: "./public/javascripts/main.js",
        css: "./public/sass/style.scss"
      },
      output: {
        path: path.resolve(__dirname, "./public/javascripts"),
        filename: '[name].js',
        publicPath: "./public/javascripts"
      },
      resolve: {
        alias: {
          javascripts: path.join(__dirname, "./public/javascripts")
        }
      },
      module: {
        rules: [
          { test: /\.hbs$/, loader: "@icetee/handlebars-loader" },
          { test: /\.(s*)css$/,
            use: ['style-loader', 'css-loader', 'sass-loader']}
        ]
      }
    };
  </code></pre>
  
  <p>this is my main.js file</p>
  
  <pre><code>    // your code
  
      var celebritiesTemplate = require("./celebritiesTemplate.hbs");
  
      var ourRequest = new XMLHttpRequest();
      ourRequest.open('GET', '../fazenda.json');
      ourRequest.onload = function() {
        if (ourRequest.status &gt;= 200 &amp;&amp; ourRequest.status &lt; 400) {
          var data = JSON.parse(ourRequest.responseText);
          createHTML(data);
        } else {
          console.log("We connected to the server, but it returned an error.");
        }
      };
  
      ourRequest.onerror = function() {
        console.log("Connection error");
      };
  
      ourRequest.send();
  
      function createHTML(petsData) {
        var rankingContainer = document.getElementById("ranking");
        rankingContainer.innerHTML = celebritiesTemplate(petsData);
      }
  </code></pre>
  
  <p>and my .hbs file</p>
  
  <pre><code>        {{#each data}}
  
          &lt;div class="celebrityStats" class="row"&gt;
              &lt;div class="thumbnail"&gt;
                  &lt;img src="{{picture}}" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="row-number"&gt;1&lt;/div&gt;
              &lt;div class="specifics"&gt;
                  &lt;div class="row-title"&gt; {{name}} &lt;/div&gt;
                  &lt;div class="row-description"&gt; {{decription}} &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="ratings"&gt;
                  &lt;div class="likes"&gt;
                      &lt;div class="head"&gt;&lt;/div&gt;
                      &lt;div class="content"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="unlikes"&gt;
                      &lt;div class="head"&gt;&lt;/div&gt;
                      &lt;div class="content"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          {{/each}}
  </code></pre>
  
  <p>this is my html file importing the bundled js that carries the handlebars file</p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
  
          &lt;title&gt;R7 FrontEnd Test&lt;/title&gt;
          &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;!-- let's code :D --&gt;
  
          &lt;div class="container"&gt;
  
            &lt;div class="box"&gt;
              &lt;div class="box-head"&gt;
                &lt;span class="logo"&gt;
                  &lt;img src="./assets/a-fazenda-logo.png" alt=""&gt;
                &lt;/span&gt;
                &lt;span class="title"&gt;
                  &lt;h1&gt;RANKING&lt;/h1&gt;
                &lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div id="ranking" class="main-box"&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;script src="./javascripts/js.js"&gt;&lt;/script&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I'm importing the .css that gulp generates from the main html, but it just don't reach the .hbs block of code, what am I doing wrong?</p>