NextJS 13如何根据环境加载不同站点的CSS文件？

问题核心 #

ES模块的import语法要求路径必须是字符串字面量，动态拼接路径会触发报错。针对你的场景，推荐以下几种可行方案：

方案一：条件静态导入（简单直接） #

利用构建时环境变量的确定性，通过条件判断导入对应样式，构建阶段Tree Shaking会自动剔除未使用的代码。

1. 保持.env.local配置不变：

HOST_NAME=site1

2. 修改About.js代码：

// 静态导入所有可能的样式文件，再根据环境变量选择
import stylesSite1 from './Button.site1.scss';
import stylesSite2 from './Button.site2.scss';

const styles = process.env.HOST_NAME === 'site1' ? stylesSite1 : stylesSite2;

const About = () => {
  return (
    <div>
      <h1 className={styles.h1}>About Page</h1>
    </div>
  );
};

export default About;

或者使用require实现条件导入：

let styles;
if (process.env.HOST_NAME === 'site1') {
  styles = require('./Button.site1.scss');
} else if (process.env.HOST_NAME === 'site2') {
  styles = require('./Button.site2.scss');
}

const About = () => {
  return (
    <div>
      <h1 className={styles.h1}>About Page</h1>
    </div>
  );
};

export default About;

方案二：Webpack别名配置（优雅推荐） #

通过NextJS的Webpack配置，根据环境变量设置别名，代码中统一使用别名导入，构建时自动替换为对应文件。

1. 项目根目录创建/修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { env }) => {
    // 动态设置样式文件别名
    config.resolve.alias['@button-style'] = `./Button.${env.HOST_NAME}.scss`;
    return config;
  },
};

module.exports = nextConfig;

2. 修改About.js代码：

import styles from '@button-style';

const About = () => {
  return (
    <div>
      <h1 className={styles.h1}>About Page</h1>
    </div>
  );
};

export default About;

注意事项 #

• 如果是客户端组件使用环境变量，需要将.env.local中的变量名改为NEXT_PUBLIC_HOST_NAME=site1，确保浏览器端能正常读取。
• 方案一和方案二都是构建时确定样式文件，不会有运行时异步加载的闪烁问题，更适合你的多站点构建场景。

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