原生CSS Mixins的@apply指令在Styled Components中无法生效？

首先明确：@apply是已废弃的CSS提案，无任何主流浏览器实现，所以Styled Components也不会支持该语法，这就是你代码里@apply完全无效的核心原因。你全局CSS里的--blue-mixin: { color: blue; }写法，属于该废弃提案的自定义样式片段语法，当前环境下根本不生效。

给你两个可行的替代方案：

方案一：使用Styled Components内联mixin #

在JS中定义可复用的样式片段，直接在styled组件中引用：

// 定义可复用样式片段
const blueMixin = `
  color: blue;
`;

// 在组件中调用
const Some = styled.div`
  color: var(--red-var);
  ${blueMixin}
`;

方案二：通过CSS类名复用全局样式 #

修改全局CSS为标准类样式：

.blue-text {
  color: blue;
}
--red-var: red;

然后在组件中通过类名应用样式：

const Some = styled.div`
  color: var(--red-var);
`;

// 使用组件时添加类名
<Some className="blue-text" />

也可以直接在Styled Components中继承类样式：

const Some = styled.div`
  color: var(--red-var);
  @extend .blue-text;
`;

（注：使用@extend需要确保全局类样式已提前加载）

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