我的nextjs应用程序无法正常加载热模块

Question

我有一个基于nextjs的项目。奇怪的是，HMR在我的项目中无法正常工作。每次进行更改时，我都必须重新运行该过程。我已附上我的下一个配置和package.json的详细信息：

next.config：

.../messages/?$search="attachment:{Name}"&$expand=Attachments

package.json

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    }
  })
);

我尝试删除node_modules并再次重新安装，但似乎无法解决问题。

以下是我的项目结构

Answer 1

从@felixmosh获得帮助。由于我的文件夹大小写与路由大小写不匹配，因此出现了问题。通过将文件夹名称更改为路由名称来解决此问题。

Answer 2

对于不使用模块和使用Typescript路径的人。

对于我的设置，我只是喜欢拥有通用的 .scss 文件

所以，在我的 _app.tsx

我添加Styles/index.scss

然后，在我的 index.scss

我添加我的 @import '~Styles/flex.scss'

注意 ~

这是它与热重载一起工作所必需的。