将 next.js 站点部署到 Netlify 时如何解决 "Module not found: Can't resolve [css file] in [directory]"？

Question

我正在尝试将此站点部署到 netlify：https://github.com/Koda-Pig/joshkoter.com 但我收到此错误：

10:02:31 AM: Module not found: Can't resolve '../styles/home.module.css' in '/opt/build/repo/pages'
10:02:31 AM: > Build failed because of webpack errors

我的 next.config.json 文件如下所示：

module.exports = {
   reactStrictMode: true
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

根据 Next.js 网站，有对 CSS 模块的内置支持，Netlify 似乎对任何其他 CSS 模块没有问题我已经创建好了，所以我不明白为什么会出现webpack错误。

我试过在 next.config.js 中指定 CSS 加载程序，如下所示：

module.exports = {
   reactStrictMode: true,
   module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

我也试过这个配置：

module.exports = {
   reactStrictMode: true,
   module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
 }
 
 const withVideos = require('next-videos')
 
 module.exports = withVideos()

但是我得到了同样的错误信息。这是我第一次将 next.js 站点部署到 Netlify，如果我遗漏了一些明显的东西，请原谅我。

如有任何帮助，我们将不胜感激。

Answer 1

更改 .css 文件名可能会解决您的问题。

这似乎是一个文件名问题，我遇到了同样的错误并通过以下更改修复了它。

我使用了 construction.js 并在样式文件夹中导入了 Construction.module.css。

我将名称从 Construction.module.css 更改为 ConstructPage.module.css 并格式化了所有 .css 文件。

因此它对我有用，我解决了这个问题。

希望它也对你有用。

将 next.js 站点部署到 Netlify 时如何解决 "Module not found: Can't resolve [css file] in [directory]"？

How do I resolve the "Module not found: Can't resolve [css file] in [directory]" when deploying next.js site to Netlify?

javascript

webpack

netlify

next.js