在React(Next.js+css-modules)中更简便使用SCSS @export类名的方案

直接把语义样式做成全局通用类，所有组件直接调用，不需要每个组件单独写@extend规则。

1. 改造_semantics.scss，把占位符替换为全局类：

/* _semantics.scss */
:global {
  .semantic-warning {
    background: orange;
    color: red;
  }
  .semantic-error {
    background: red;
    color: black;
  }
  .semantic-success {
    background: green;
    color: white;
  }
}

2. 在Next.js根布局文件（app/layout.jsx或者pages/_app.jsx）全局引入一次这个文件：

// app/layout.jsx
import '@/styles/_semantics.scss'

3. 组件里直接动态拼接类名即可，不需要单独编写组件对应的SCSS文件：

// component.jsx
export default function Component({ status }) {
  return (
    <div className={`semantic-${status}`}>
      ...
    </div>
  )
}

如果需要和其他CSS Modules类组合，可以搭配第三方classnames库拼接：

import classNames from 'classnames'
import css from './component.module.scss'

export default function Component({ status, isBlock }) {
  return (
    <div className={classNames(`semantic-${status}`, css.container, { [css.block]: isBlock })}>
      ...
    </div>
  )
}

如果不想用全局类，需要保留样式局部作用域，可以用SCSS循环批量生成所有状态类，不需要手动编写每一个@extend：

/* component.module.scss */
@use "semantics" as *;

$statusList: warning, error, success;

@each $status in $statusList {
  .#{$status} {
    @extend %#{$status};
  }
}

后续新增状态只需要在$statusList数组中添加对应值即可，不需要重复编写扩展逻辑，组件调用代码不需要修改。

和你想要的「行内扩展」效果最接近，完全省去编写组件级SCSS扩展类的步骤，运行时可动态修改：

1. 全局定义语义化CSS变量：

/* _semantics.scss */
:root {
  --warning-background: orange;
  --warning-color: red;
  --error-background: red;
  --error-color: black;
  --success-background: green;
  --success-color: white;
}

2. 组件里直接通过style属性动态绑定：

export default function Component({ status }) {
  return (
    <div style={{
      background: `var(--${status}-background)`,
      color: `var(--${status}-color)`
    }}>
      ...
    </div>
  )
}

如果你的语义样式需要支持自定义参数，可以用@mixin替代@extend，配合循环批量生成规则：

1. 改造_semantics.scss为mixin：

/* _semantics.scss */
@mixin semantic($status, $padding: 8px) {
  padding: $padding;
  @if $status == warning {
    background: orange;
    color: red;
  } @else if $status == error {
    background: red;
    color: black;
  } @else if $status == success {
    background: green;
    color: white;
  }
}

2. 组件SCSS文件批量生成类：

/* component.module.scss */
@use "semantics" as *;

$statusList: warning, error, success;

@each $status in $statusList {
  .#{$status} {
    @include semantic($status, 12px); // 可自定义传参
  }
}

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