如何使用nextjs和sass导出到静态网站？

Question

我最近开始学习nextjs / react，并在尝试将我的应用程序导出到静态站点时按照nextjs官方网站上的教程进行操作：

我正在使用sass来设计应用程序的样式，并且在尝试运行npm run build脚本时，抛出了一个错误消息

  

模块解析失败：意外令牌（1：0）您可能需要一个   适当的加载程序来处理此文件类型。

我已经检查了我的代码结构和设置，无法确定出了什么问题。看起来错误与sass加载程序有关吗？任何指针将不胜感激。

下面是我的设置的一些屏幕截图。

Answer 1

您需要添加sass-loader依赖项。

npm i -D sass-loader

，然后像这样添加它：

config.module.rules.push(
  {
    test: /\.s(a|c)ss$/,
    use: ['babel-loader', 'raw-loader',
      { loader: 'sass-loader' },
    ],
  },
);

Answer 2

您的module.exports中有两个next.config.js，这是无效的。

也许尝试将配置传递到withSass并将其导出...

module.exports = withSass({ exportPathMap: /* ... etc ... */ })