Question

我正在使用WebPack，现在我需要编译SASS fiels（我们将使用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",
...

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

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

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

我正在阅读的一些帖子已经过时了，我觉得它们可能已经过时，弊大于利。关于WebPack和SASS之间的联系（例如Another post和this），似乎有很多帖子没有得到回答。我担心我可能会在错误的树上狂奔......

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

Answer 1

不需要在代码中的任何位置写import Sass from "node-sass";。 node-sass包是构建管道的一部分，它使用webpack并因此在节点环境中运行。但是，您的前端代码通常与节点env没有任何连接，因为它在浏览器中运行。这也解释了为什么您遇到与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配置源映射。

无法配置WebPack以使用SASS文件

1 个答案: