NextJS中如何根据窗口宽度拆分CSS链接？

NextJS 默认的 CSS Modules 处理逻辑不会自动按媒体查询拆分样式表并生成带media属性的链接标签，但可以通过以下两种方式实现需求：

1. 手动拆分样式文件 + 条件加载 #

将不同媒体查询的样式拆分为独立的CSS模块文件：

• MyComponent.mobile.module.css：仅包含移动端样式
• MyComponent.desktop.module.css：仅包含桌面端样式
• MyComponent.global.module.css：包含通用样式

然后在组件中通过next/dynamic或者尺寸判断来条件导入：

import styles from './MyComponent.global.module.css';
import dynamic from 'next/dynamic';

const MobileStyles = dynamic(() => import('./MyComponent.mobile.module.css'), {
  ssr: false,
  loading: () => null,
});
const DesktopStyles = dynamic(() => import('./MyComponent.desktop.module.css'), {
  ssr: false,
  loading: () => null,
});

export default function MyComponent() {
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 800;
  
  return (
    <div className={`${styles.myClass} ${isMobile ? MobileStyles.myClass : DesktopStyles.myClass}`}>
      {/* 组件内容 */}
    </div>
  );
}

这种方式需要手动拆分样式，客户端侧需做尺寸判断，SSR场景下无法直接生效，适合简单场景快速落地。

2. 自定义Webpack配置拆分样式 #

借助mini-css-extract-plugin和css-minimizer-webpack-plugin，在NextJS的next.config.js中自定义Webpack配置，实现按媒体查询拆分CSS：

首先安装依赖：

npm install mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev

然后修改next.config.js：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  webpack: (config, { isServer }) => {
    // 仅在客户端构建时处理
    if (!isServer) {
      // 替换默认的CSS处理规则
      config.module.rules.forEach(rule => {
        if (rule.test.toString().includes('.css')) {
          rule.use = [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]_[hash:base64:5]',
                },
              },
            },
          ];
        }
      });

      // 添加MiniCssExtractPlugin配置，按媒体查询拆分
      config.plugins.push(
        new MiniCssExtractPlugin({
          filename: 'static/css/[name]-[contenthash].css',
          chunkFilename: 'static/css/[id]-[contenthash].css',
          ignoreOrder: true,
        })
      );

      // 配置CSS压缩器，禁止合并媒体查询
      config.optimization.minimizer.push(
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: [
              'default',
              {
                mergeMedia: false,
              },
            ],
          },
        })
      );
    }

    return config;
  },
};

这种方式能自动按媒体查询拆分样式表并生成带对应media属性的<link>标签，但需要注意和NextJS内置CSS处理逻辑的兼容性，建议在测试环境充分验证后再用于生产。

需要说明的是，NextJS官方的CSS Modules方案核心聚焦于组件级样式隔离，原生并不支持按媒体查询自动拆分样式表的功能，上述方案均为基于自定义配置或手动拆分的折中实现。

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