无法将 WebPack 配置为处理 SASS 文件

Question

我正在使用webpack，现在我需要进行sass fiels的汇编（我们将使用bootstrap）。首先，我安装了 node-sass 和 sass-loader （不确定是否完全需要任何一个）。然后，在我的 server.js 中，我添加了以下行（还没有更多地指 Sass对象）。

import Sass from "node-sass";

汇编给了我错误的错误，即 fs package丢失了，因此根据此答案，我尝试了以下内容（单独和同时）。关于 fs 的错误消失了，但是在 package.json.json 的 node-sass-sass module中有一些意外令牌。

node: { fs: "empty" },
target: "node",
...

我不知道那些会做什么，以及那些会如何影响任何事情。两者似乎都会产生相同的错误。上面的任何灯光都是额外的好处，因为它们彼此之间的不同。

然后，我还试图通过以下添加在此处建议的 webpack.config.js 中的加载程序。甚至试图映射此处所述的源。另一篇文章建议使用不同的语法进行目标规范...似乎没有任何帮助，最后我完全感到困惑并放弃了。

module: {
  loaders: [
    { test: /.js$/, loader: "babel", exclude: /node_modules/ },
    { test: /.scss$/, loader: 'style!css!sass' }
  ]
},
sassLoader: { sourceMap: true },
...

我正在阅读的一些帖子很旧，我觉得它们可能已经过时了，弊大于利。而且似乎没有很多帖子回答，这是关于WebPack和Sass之间的联系（例如，这和此）。我担心我可能会吠叫错误的树...

我需要指向正确方向的帮助。

Answer 1

不需要在代码中的任何地方写import Sass from "node-sass";。node-sass软件包是使用WebPack并因此在节点环境中运行的构建式PIPeline的一部分。但是您的前端代码通常没有与节点env的任何连接，因为它在浏览器中运行。这也解释了为什么您会遇到与fs有关的错误。您还应该摆脱node: { fs: "empty" }, target: "node", ...的东西。在纯前端相关的WebPack管道中，您不需要这些黑客。

在您的webpack.config.js文件中尝试以下内容：

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

要使事情开始时不要从头开始使用源地图，但是一旦设置的其余部分运行，就会添加它们。要获取Sourcemaps，每个加载程序必须重新使用以前的加载程序的结果，这就是为什么您应该从查看sass-loader配置Sourcemaps的原因。