使用自定义 Sass 导入器时，如何确保 webpack-dev-server 重新编译 Sass？

Question

我正在使用custom Sass importer，它可以让我将 JavaScript/JSON 文件导入我的 Sass。我遇到的问题是，当我保存一些正在导入 Sass 的 JavaScript 文件时，使用 webpack-dev-server 时它不会触发热更新/重新加载。

如果我也在我的主应用的 JavaScript 中导入有问题的文件，保存它会按预期工作（它将触发成功的重新编译）。

对于更多上下文，我有一个 UI 组件，它有一个 index.js 文件。在这个index.js 文件中，我正在导入一个Sass 文件。在这个 Sass 文件中，我正在导入我的 JavaScript 文件，该文件在保存时不会触发重新加载。

我不确定这是 Node-Sass 问题还是 Webpack 问题，但其他一切都按预期工作。我可以将其他 Sass 文件导入到主 Sass 文件中并保存这些文件将触发热重载/更新。

Answer 1

我明白了这一点。在我的自定义 Sass Importer 中，我返回的是：

{ contents: "String" }

...根据the Node-Sass docs。我应该返回：

{ 
  file: "String",
  contents: "String" 
}

file 是导入文件的计算路径。如果不通过这个，Node/Webpack 将不会知道该文件，因此不会观察它的变化。