如何加载带运行时唯一哈希的CSS Modules解决微前端样式冲突？

我有2个共享同一组件库的微前端，这会因样式定义顺序问题引发特异性Bug。例如：假设存在以下样式：

.card { padding: 1rem; border-radius: 1rem; }
.profile { padding: 2rem; }

• 微前端1使用Card组件 <div class="card">，以及Profile组件 <Card class="profile">，最终生成 <div class="card profile">；
• 微前端2仅使用Card组件。

在此场景下，微前端2的 .card 样式会覆盖 .profile 的样式，导致Profile的padding为1rem。

需求 #

无需迁移现有组件级CSS Modules代码，转而采用CSS-in-JS方案，要求样式在运行时注入且具备运行时唯一性。询问是否有支持导入.modules.scss文件的相关库？

以下几个库可满足你的需求，无需完全迁移现有.modules.scss代码，同时实现运行时注入的唯一样式：

1. styled-components + babel-plugin-styled-components + sass-loader #

保留现有.modules.scss文件，通过styled-components的css辅助函数导入并使用SCSS代码，配合babel插件为生成的样式添加唯一哈希标识，确保运行时样式唯一性：

import styled from 'styled-components';
import { css } from 'styled-components';
import cardStyles from './card.modules.scss';

const Card = styled.div`
  ${css(cardStyles.card)}
`;

const ProfileCard = styled(Card)`
  ${css(cardStyles.profile)}
`;

babel插件会自动为每个样式块添加唯一类名后缀，避免不同微前端间的样式冲突，样式会随组件渲染动态注入页面。

2. emotion + @emotion/babel-plugin + sass #

Emotion支持导入SCSS模块，通过css函数包裹SCSS导出的样式，结合babel插件生成唯一类名：

import { css, styled } from '@emotion/styled';
import cardStyles from './card.modules.scss';

const Card = styled.div`
  ${css(cardStyles.card)}
`;

const ProfileCard = styled(Card)`
  ${css(cardStyles.profile)}
`;

Emotion的运行时注入机制会确保每个微前端的样式都带有唯一标识，不会因加载顺序导致特异性覆盖问题。

3. linaria #

Linaria支持直接导入SCSS文件，开启运行时模式（通过@linaria/react的useStyleSheet）后，会为生成的样式添加唯一哈希：

import { styled } from '@linaria/react';
import cardStyles from './card.modules.scss';

const Card = styled.div`
  ${cardStyles.card}
`;

const ProfileCard = styled(Card)`
  ${cardStyles.profile}
`;

运行时模式下，样式随组件渲染注入，类名的唯一性可避免跨微前端的样式冲突。

这些方案的核心是保留原有SCSS模块写法，通过CSS-in-JS库的包装自动生成唯一标识，解决微前端间的样式顺序覆盖问题，无需大规模迁移现有代码。

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