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

问题描述

问题

在构建和开始我们的应用程序的生产构建时，没有加载 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/
          }
        }
      ],"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}`);
  });
});

假设

由于自定义服务器是生产和开发之间的唯一区别，我只能假设错误可能在某个地方。但对我来说看起来不错。因此，如果有人有任何提示或想法，我将不胜感激。

解决方法

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