Css 使用 nextjs 时未在生产模式下加载

Question

问题

在构建和启动我们的应用程序的生产构建时，没有加载 css。检查 devtools，我可以看到无数的错误和警告：

可能的罪魁祸首

在开发模式下启动应用程序时，我没有遇到任何这些问题。此外，图像或字体等其他资产也已正确加载。我们使用 scss 并在 _app.tsx 中导入全局样式表，如下所示：

import "../styles/globals.scss";

为了解决另一个库的问题，我们必须设置一个自定义的 webpack 配置：

module.exports = phase => ({
  webpack: (config, { isServer }) => {
    config.module.rules.push({
      test: /\.node$/,
      use: "node-loader"
    });

    config.module.rules.push({
      test: /\.(ts|js)x?$/,
      use: [
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true
          }
        }
      ],
      include: [path.resolve(__dirname, "node_modules/@private/")],
      exclude: [path.resolve(__dirname, "node_modules/@private/src/styleguide")]
    });

    if (!isServer) {
      config.module.rules.push({
        test: /\.s?[ac]ss$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "resolve-url-loader",
            options: { removeCR: true, debug: true }
          },
          { loader: "sass-loader" }
        ]
      });
    }

    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[name].[ext]",
            exclude: /node_modules/
          }
        }
      ],
      exclude: [path.resolve(__dirname, "node_modules/@private/src")]
    });

    return config;
  }
});

此外，这是我们用于在生产模式下启动应用程序的自定义服务器的文件：

const PORT = parseInt(process.env.PORT, 10) || 3364;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("*", (req, res) => handle(req, res));

  server.listen(PORT, err => {
    if (err) throw err;
    console.log(` => Ready on http://localhost:${PORT}`);
  });
});

假设

由于自定义服务器是生产和开发之间的唯一区别，我只能假设错误可能出在某处。但我觉得很好。因此，如果有人有任何提示或想法，我将不胜感激。

Answer 1

好的，在通过 npm run build 构建生产版本之前，我刚刚删除了 .next 文件夹，之后一切正常。当 .next 文件夹存在时，块生成似乎存在一些问题。

Css 使用 nextjs 时未在生产模式下加载

Css not loading in production mode when using nextjs

css

webpack

sass

next.js

webpack-style-loader

问题

可能的罪魁祸首

假设