在Next.js中使用mini-css-extract-plugin打包单个CSS文件的配置咨询

修改后的完整配置 #

你只需要将mini-css-extract-plugin的相关逻辑整合到nextConfig的webpack自定义配置段即可，以下是调整完成的完整代码：

const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

// next.js configuration
const nextConfig = {
  images: {
    domains: ['ibexcdn.com'],
  },
  webpack: (config, { isServer, dev }) => {
    // 仅生产环境客户端编译阶段生效，不影响开发调试和服务端渲染逻辑
    if (!dev && !isServer) {
      // 合并官方要求的拆包规则，强制合并所有CSS到单个文件
      config.optimization.splitChunks.cacheGroups.styles = {
        name: "styles",
        type: "css/mini-extract",
        chunks: "all",
        enforce: true,
      }
      // 注册MiniCssExtractPlugin插件
      config.plugins.push(
        new MiniCssExtractPlugin({
          filename: "[name].css",
        })
      )
      // 补充CSS和Sass文件的处理规则
      config.module.rules.push(
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test: /\.s[ac]ss$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        }
      )
    }
    return config
  }
};

module.exports = withPlugins(
  [
    [
      nextTranslate,
      {
        webpack: (config, { isServer, webpack }) => {
          return config;
        },
      },
    ],
    withBundleAnalyzer,

    [
      withPWA,
      {
        pwa: {
          disable: process.env.NODE_ENV === "development",
          dest: 'public',
          runtimeCaching: [
            {
              urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
              handler: 'NetworkFirst',
              options: {
                cacheName: 'static-font-assets',
                expiration: {
                  maxEntries: 4,
                  maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
                }
              }
            }
          ]
        },
      },
    ],
  ],
  nextConfig,
);

核心改动说明 #

• 所有CSS合并逻辑做了环境判断，仅在生产环境生效，不会拖慢开发环境编译速度
• 额外补充了Sass文件的匹配规则，适配你用Sass开发样式的场景
• 完全对齐官方给出的配置规范，没有自定义逻辑，不会引入兼容问题

内容的提问来源于stack exchange，提问作者amin71