Question

我正在node中运行一个非常小的应用程序，并且我正在使用D = np.array...将我的js与车把捆绑在一起，与此同时，我正在使用webpack将sass文件处理为css。

当我从主html文件中删除了车把代码并将其放入.hbs文件中时，需要从mainjs进行调用，并且他们仅在html中调用一个js文件时，我的css似乎无法到达.hbs html代码，所以我也尝试将sass文件alltogheter与webpack捆绑在一起，但是随后在主js文件中出现了无法读取css的错误。

这是我的webpack.config.js

gulp

这是我的main.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']}
      ]
    }
  };

和我的.hbs文件

    // 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);
    }

这是我的html文件，用于导入附带了车把文件的捆绑js

        {{#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}}

我正在导入gulp从主html生成的.css，但只是没有到达.hbs代码块，我在做什么错了？

无法捆绑Sass和把手-Webpack配置

0 个答案: