css - 无法将 WebPack 配置为使用 SASS 文件

Question

我正在使用 WebPack，现在我需要编译 SASS 字段(我们将使用 Bootstrap)。首先，我安装了 node-sass 和 sass-loader(不确定是否需要其中任何一个)。然后，在我的 server.js 中，我添加了以下行(没有其他内容会引用 Sass 对象)。

import Sass from "node-sass";

编译给我的错误是 fs 包丢失，所以基于 this answer我已经尝试了以下(单独和同时)。关于 fs 的错误消失了，但在 node-sass 模块的 package.json 中出现了一些关于意外标记的东西。

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

我不知道那些会做什么以及它们如何影响任何事情。两者似乎都会产生相同的错误。任何关于这一点的光都会是额外的奖励，因为它们看起来彼此完全不同。

然后，我还尝试通过以下添加建议在我的 webpack.config.js 中启用加载程序 here .甚至尝试像描述的那样映射源 here . Another post建议对目标规范使用不同的语法...似乎没有任何帮助，最后我完全困惑并放弃了。

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

我正在阅读的一些帖子是旧的，我觉得它们可能已经过时并且弊大于利。似乎有很多帖子没有回答关于 WebPack 和 SASS 之间的连接(例如 this 和 this )。我担心我可能找错了树......

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

Answer 1

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

在您的 webpack.config.js 文件中尝试以下操作:

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

为了让事情顺利进行，不要从一开始就使用源映射，而是在其余设置运行后添加它们。要获取源映射，每个加载器必须重新使用前一个加载器的结果，这就是为什么您应该首先查看源映射是如何为 sass-loader 配置的。 .