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

【问题标题】：how to export to static website using nextjs and sass?如何使用 nextjs 和 sass 导出到静态网站？
【发布时间】：2018-10-11 22:51:52
【问题描述】：

我最近开始学习 nextjs/react，但在尝试将我的应用导出到静态网站时，却被nextjs 官方网站上的教程卡住了：

我正在使用 sass 来设置应用程序的样式，当尝试运行 npm run build 脚本时，它会抛出一个错误提示

模块解析失败：意外令牌 (1:0) 您可能需要一个适当的加载器来处理这种文件类型。

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

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

【问题讨论】：

【解决方案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' },
    ],
  },
);

【讨论】：

感谢您的回复。我设法解决了这个问题，但在导出所有文件后我仍然遇到其他两个问题。 1. 我有一个重复的标题组件。 2. css 并不适用于所有页面。不确定这里到底出了什么问题。
嗯，看来你有一些架构问题。是否可以提供您的应用示例？

【解决方案2】：

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

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

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

【讨论】：