Next.js多语言（英/阿）样式适配：避免CSS重复方案咨询

针对Next.js + SCSS Modules + next-intl的双语方向样式问题，推荐两种高效避免代码重复的方案：

方案一：SCSS混合宏（Mixin）自动反转左右属性 #

这种方式适合零散的样式定义，只需编写LTR（英文）样式，自动生成RTL（阿拉伯文）的反转样式。

1. 创建全局方向工具文件 #

在项目样式目录下新建_direction.scss，定义方向变量、替换函数和混合宏：

// 定义方向常量
$dir-ltr: ltr;
$dir-rtl: rtl;

// 字符串替换函数：用于转换left/right属性名
@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

// 方向混合宏：自动生成LTR/RTL样式
@mixin direction($prop, $value-ltr, $value-rtl: null) {
  // 默认LTR样式
  #{$prop}: $value-ltr;

  // RTL样式处理
  :global([dir="#{$dir-rtl}"]) & {
    @if $value-rtl {
      // 手动指定RTL值（比如text-align: left → right）
      #{$prop}: $value-rtl;
    } @else {
      // 自动反转左右属性（比如padding-left → padding-right）
      $prop-rtl: str-replace($prop, "-left", "-right");
      $prop-rtl: str-replace($prop-rtl, "-right", "-left");
      #{$prop-rtl}: $value-ltr;
    }
  }
}

2. 在组件SCSS中使用混合宏 #

在每个组件的*.module.scss中导入全局工具文件，然后用@include direction()编写样式：

@import "../styles/_direction.scss"; // 路径根据项目结构调整

.card {
  // 自动反转：padding-left → padding-right（RTL下）
  @include direction(padding-left, 20px);
  // 自动反转：margin-right → margin-left（RTL下）
  @include direction(margin-right, 12px);
  // 手动指定RTL值：text-align left → right
  @include direction(text-align, left, right);
  // 无需反转的属性：只传一个值，LTR/RTL保持一致
  @include direction(font-size, 16px);
}

方案二：全局CSS变量定义方向值 #

这种方式更简洁，适合统一的方向相关样式，提前定义好LTR/RTL对应的变量值。

1. 全局定义方向变量 #

在全局样式文件（比如globals.scss）中基于dir属性定义CSS变量：

// LTR（英文）变量
:root[dir="ltr"] {
  --space-start: 20px;
  --space-end: 12px;
  --text-align: left;
  --float-direction: left;
}

// RTL（阿拉伯文）变量
:root[dir="rtl"] {
  --space-start: 12px;
  --space-end: 20px;
  --text-align: right;
  --float-direction: right;
}

2. 组件中直接使用变量 #

在组件的*.module.scss中直接引用这些变量：

.card {
  padding-left: var(--space-start);
  margin-right: var(--space-end);
  text-align: var(--text-align);
  float: var(--float-direction);
}

结合next-intl设置文档dir属性 #

在Next.js的根布局中，根据当前语言动态设置html标签的dir属性：

import { useLocale } from 'next-intl';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const locale = useLocale();
  const dir = locale === 'ar' ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

注意事项 #

• 方案一的混合宏适合处理零散、不规则的方向样式，方案二更适合统一的布局规范；
• SCSS Modules中使用:global([dir="rtl"])是为了穿透模块化选择器，正确匹配全局的dir属性；
• 对于特殊的方向属性（比如border-radius的border-top-left-radius），可以在混合宏中扩展替换规则，或者手动指定RTL值。

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