使用Next.js时，生产模式下CSS未加载

Question

问题

在构建和启动我们应用的生产版本时，没有加载任何 css。检查开发者工具，我可以看到各种错误和警告：

可能的原因

当以开发模式启动应用程序时，我没有遇到这些问题。此外，其他资源（如图像或字体）都正确加载了。我们使用 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}`);
  });
});

假设

由于自定义服务器是生产环境和开发环境之间的唯一区别，我只能假设错误可能出现在这里。但在我看来没有问题。因此，如果有人有提示或想法，我将非常感激。

- Gh05d

---

isServer 的值是多少？ - Amaresh S M

从文档中得知：webpack函数会被执行两次，一次是为了服务器端，另一次是为了客户端。这样可以通过isServer属性来区分客户端和服务器端的配置。 - juliomalves

那么你在生产模式下没有使用style-loader和css-loader吗？ - Amaresh S M

@AmareshSM，不，我没有在服务器上使用它。我只是试图将其删除，但出现了错误“ReferenceError: document is not defined”。 - Gh05d

Answer 1

好的，我刚刚在通过npm run build生成生产版本之前删除了.next文件夹，此后一切正常。看起来当存在.next文件夹时，会出现一些块生成的问题。

- Gh05d

---

它真的起作用了。当我使用next build时，我也遇到了CSS未加载的问题。你救了我的命。 - Felix Htoo