如何基于服务端Props动态导入CSS？

针对你遇到的动态加载品牌专属预处理全局CSS的问题，以下是两种可行的解决方案，同时说明你之前尝试失败的原因：

方案一：动态导入+独立CSS Chunk（修正Webpack配置） #

这种方式在客户端根据服务端传来的brand动态加载对应CSS，同时通过Webpack配置将每个品牌CSS打包为独立文件，避免样式冲突。

1. 修改Next.js配置文件（next.config.js） #

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  webpack: (config, { isServer }) => {
    // 移除默认的CSS处理规则，防止全局CSS被合并
    config.module.rules = config.module.rules.filter(
      rule => !rule.test?.test('.css') && !rule.test?.test('.scss')
    );

    // 配置品牌CSS的预处理与提取规则
    const cssLoader = {
      loader: 'css-loader',
      options: { importLoaders: 1 }
    };
    const sassLoader = 'sass-loader';

    if (isServer) {
      // 服务端打包时提取CSS为独立文件
      config.plugins.push(
        new MiniCssExtractPlugin({
          filename: 'static/css/[name].css',
          chunkFilename: 'static/css/[name].css'
        })
      );
      config.module.rules.push({
        test: /src\/css\/brand-(a|b)\.css$/,
        use: [MiniCssExtractPlugin.loader, cssLoader, sassLoader],
        include: path.resolve(__dirname, 'src/css')
      });
    } else {
      // 客户端打包时使用style-loader动态注入
      config.module.rules.push({
        test: /src\/css\/brand-(a|b)\.css$/,
        use: ['style-loader', cssLoader, sassLoader],
        include: path.resolve(__dirname, 'src/css')
      });
    }

    return config;
  }
};

2. 在_app.tsx中动态导入CSS #

import { useEffect, useState } from 'react';
import type { AppProps } from 'next/app';

type OwnPageProps = {
  brand: "a" | "b"
};

const MainApp = ({ Component, pageProps }: AppProps<OwnPageProps>) => {
  const { brand } = pageProps;
  const [cssLoaded, setCssLoaded] = useState(false);

  useEffect(() => {
    const loadBrandCss = async () => {
      try {
        // 根据brand动态导入对应CSS文件
        await import(`../css/brand-${brand}.css`);
        setCssLoaded(true);
      } catch (err) {
        console.error('品牌CSS加载失败:', err);
      }
    };
    loadBrandCss();
  }, [brand]);

  // 可选：等待CSS加载完成后渲染组件，避免样式闪烁
  if (!cssLoaded) return null;

  return <Component {...pageProps} />;
};

export default MainApp;

方案二：服务端渲染时注入CSS链接（自定义Document） #

这种方式在服务端渲染阶段就根据brand注入对应CSS文件的链接，避免客户端样式闪烁，更适合SEO友好的场景。

1. 配置next.config.js（同方案一的Webpack配置） #

确保每个品牌CSS被打包为独立的静态文件，路径为/_next/static/css/brand-*.css。

2. 创建自定义Document（pages/_document.tsx） #

import Document, { Html, Head, Main, NextScript } from 'next/document';
import type { DocumentContext } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    // 从请求参数或pageProps中获取brand（根据你的业务逻辑调整）
    const brand = ctx.req?.query?.brand || 'a';
    return { ...initialProps, brand };
  }

  render() {
    const { brand } = this.props;
    return (
      <Html>
        <Head>
          {/* 注入对应品牌的CSS文件 */}
          <link
            rel="stylesheet"
            href={`/_next/static/css/brand-${brand}.css`}
            type="text/css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

3. 在页面中传递brand参数 #

在任意页面的getServerSideProps中传递brand到全局props：

export async function getServerSideProps(context) {
  // 示例：从URL参数获取brand
  const brand = context.query.brand as "a" | "b" || 'a';
  return { props: { brand } };
}

你之前尝试失败的原因 #

• 方法1失败：直接导入两个全局CSS时，Next.js默认会将所有全局CSS合并到一个文件中，相同全局选择器（如:root）会因加载顺序导致样式覆盖。
• 方法2失败：CSS模块要求选择器必须包含本地类或ID，:root是全局选择器，不符合CSS模块的"纯选择器"规则，因此抛出错误。
• 方法3失败：Webpack配置时未正确设置静态资源路径，Next.js的静态资源默认挂载在/_next/static/路径下，若你的CSS文件路径未匹配此规则，客户端请求时就会出现404。

注意事项 #

• 确保安装所需依赖：npm install sass-loader sass css-loader style-loader mini-css-extract-plugin --save-dev
• 若使用Next.js 13+的App Router，需调整配置逻辑，但上述方案适用于Pages Router（即你当前使用的_app.tsx架构）。

内容的提问来源于stack exchange，提问作者Cristian E.