如何在TSX/JSX中引入node_modules内SCSS的mixin编写组件样式

核心原因 #

SCSS的@mixin属于预编译阶段的语法抽象，仅定义mixin不会输出任何实际CSS代码，必须显式通过@include调用mixin才会生成对应的CSS类规则。直接在TSX中引入仅包含mixin定义的SCSS文件，相当于引入了无实际样式内容的空文件，自然不会生效。

分步解决流程 #

1. 确认SCSS编译配置正常 #

首先保证你的项目构建工具（Webpack/Vite/CRA/Next.js等）已配置SCSS解析能力，且能正确识别node_modules内的SCSS文件路径：

• 旧版Webpack场景下，引入node_modules内的SCSS需要在路径前加~前缀，例如~@your-dependency/styles/xxx.scss
• Vite/Rollup/新版CRA/Next.js场景无需加前缀，直接写包名开头的完整路径即可，例如@your-dependency/styles/xxx.scss
• 如果频繁引用node_modules内的SCSS，可以在SCSS loader配置中添加includePaths: ['node_modules']，后续引入可以省略node_modules前缀，直接写包内路径。

2. 新建组件专属SCSS文件，引入依赖并调用mixin #

不要直接在TSX中引入依赖内的原始SCSS文件，在你的组件目录下新建独立的SCSS文件（如果用CSS Modules就命名为[组件名].module.scss），写入以下内容：

// 替换为你实际依赖中的SCSS文件路径
@import '@your-dependency/path/to/the/scss-file.scss';

// 调用目标mixin，不传参则使用默认类名embedded-control
@include make-embedded-control();

// 如果需要自定义类名，传入参数即可
// @include make-embedded-control('your-custom-class-name');

3. 在TSX文件中引入你自己写的SCSS文件 #

根据你是否使用CSS Modules，对应写法不同：

• 普通全局样式场景：

// 引入同目录下自己写的SCSS
import './EmbeddedControl.scss';

export default function YourComponent() {
  // 类名和mixin生成的类名保持一致，默认是embedded-control
  return <div className="embedded-control">
    组件内容
  </div>
}

• CSS Modules场景：

// 引入CSS Module文件
import styles from './EmbeddedControl.module.scss';

export default function YourComponent() {
  // 如果开启了camelCase转换可以用styles.embeddedControl，否则用以下写法
  return <div className={styles['embedded-control']}>
    组件内容
  </div>
}

常见踩坑排查 #

• 不要在TSX中直接import依赖包内仅含mixin定义的SCSS：这类文件没有实际CSS输出，引入后不会产生任何样式效果
• 如果是CSS Modules场景，注意mixin生成的类名会被自动加上hash标识，不要在JSX中写死全局类名导致匹配失败
• 如果出现mixin未定义的报错，优先检查引入依赖SCSS的路径是否正确，是否存在拼写错误
• 如果样式重复注入，检查是否在多个组件文件中重复调用了同一个mixin，可以将mixin调用提升到全局样式文件中统一引入。

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