Не могу связать sass и руль - конфиг webpack - PullRequest
Новая
       6

Не могу связать sass и руль - конфиг webpack

0 голосов
/ 13 января 2019

Я запускаю очень маленькое приложение в узле, и я использую webpack для связывания моих js с рулем, в то время как я использовал gulp для обработки моего файла sass на css.

Когда я удалил код руля из основного html-файла и поместил его в файл .hbs, чтобы требовать от mainjs, а они вызывают только один js-файл в html, мой css, кажется, не достигает html-кода .hbs , поэтому я попытался связать все файлы sass вместе с веб-пакетом, но затем я получил ошибки в основном файле js, которые не могут прочитать css.

Это мой webpack.config.js 

  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']}
      ]
    }
  };

это мой файл main.js 

    // your code

    var celebritiesTemplate = require("./celebritiesTemplate.hbs");

    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', '../fazenda.json');
    ourRequest.onload = function() {
      if (ourRequest.status >= 200 && ourRequest.status < 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);
    }

и мой файл .hbs 

        {{#each data}}

        <div class="celebrityStats" class="row">
            <div class="thumbnail">
                <img src="{{picture}}" alt="">
            </div>
            <div class="row-number">1</div>
            <div class="specifics">
                <div class="row-title"> {{name}} </div>
                <div class="row-description"> {{decription}} </div>
            </div>

            <div class="ratings">
                <div class="likes">
                    <div class="head"></div>
                    <div class="content"></div>
                </div>
                <div class="unlikes">
                    <div class="head"></div>
                    <div class="content"></div>
                </div>
            </div>
        </div>

        {{/each}}

это мой html-файл, импортирующий связанный js-файл с файлом handlebars 

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">

        <title>R7 FrontEnd Test</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
      </head>
      <body>
          <!-- let's code :D -->

        <div class="container">

          <div class="box">
            <div class="box-head">
              <span class="logo">
                <img src="./assets/a-fazenda-logo.png" alt="">
              </span>
              <span class="title">
                <h1>RANKING</h1>
              </span>
            </div>

            <div id="ranking" class="main-box">


            </div>
          </div>

        </div>

        <script src="./javascripts/js.js"></script>
    </html>

Я импортирую .css, который генерирует gulp из основного html, но он просто не достигает блока кода .hbs, что я делаю не так?

...