Next.js中components目录下.module.scss生成过多.css文件该如何配置

Next.js 默认会对每个独立的.module.scss文件单独抽离CSS，分散存放在components及其子目录下的模块化样式文件会在构建时生成大量零散CSS文件，可通过修改next.config.js配置合并CSS chunk解决该问题。

前置依赖确认 #

确保项目已安装sass依赖，Next.js 内置支持Sass无需额外配置loader，未安装可执行命令：
npm i sass 或 yarn add sass

完整修改后的next.config.js配置 #

const path = require('path');
const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
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'],
  },
  // 合并CSS chunk 减少生成文件数量  Next.js13+支持该实验性配置 12及以下版本可删除
  experimental: {
    cssChunking: 'strict',
  },
  // 配置Sass加载规则 支持components目录下的模块化样式识别
  sassOptions: {
    includePaths: [path.join(__dirname, 'components')],
    // 如有全局Sass变量/混合宏需要全量引入 可放开下方配置替换为你的全局样式路径
    // additionalData: `@import "@/styles/variables.scss";`,
  },
  webpack: (config, { isServer }) => {
    // 强制合并所有样式到同一个styles chunk
    if (!isServer) {
      config.optimization.splitChunks.cacheGroups.styles = {
        name: 'styles',
        test: /\.(css|scss|sass)$/,
        chunks: 'all',
        enforce: true,
      }
    }
    return config
  },
};

module.exports = withPlugins(
  [
    [
      nextTranslate,
      {
        webpack: (config, { isServer, webpack }) => {
          // 合并全局webpack配置逻辑
          config = nextConfig.webpack(config, { isServer });
          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,
);

配置说明 #

• experimental.cssChunking: 'strict'：Next.js 13+ 提供的实验性特性，会自动合并零散CSS chunk，大幅减少构建生成的CSS文件数量
• webpack splitChunks自定义规则：强制将所有样式文件打包到统一的styles chunk中，适配所有Next.js版本
• sassOptions配置：无需将样式文件存放在官方推荐的styles目录下，即可正常识别components及其子目录下的所有.module.scss文件

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