CSS模块组成的规则在create-rect应用程序中不起作用

Question

我有两个组件，每个组件都有一个CSS模块：

---

src/_components/ProfileImage.tsx

import styles form './ProfileImage.module.scss';
function ProfileImage () {
return (
<img className={styles.profileImage} />
)
}
export default ProfileImage;

src/_components/ProfileImage.module.scss

.profileImage {
height: 50px;
width: 50px;
}

---

和

---

src/ProfilePage/Profile.tsx

import styles form './ProfilePage.module.scss';
function ProfilePage () {
return (
<ProfileImage className={styles.profileImage}
)
}
export default ProfilePage;

src/ProfilePage/Profile.module.scss

.profileImage {
composes: profileImage from '_components/ProfileImage.module.scss';
outline: 1px solid red;
}

---

1. 这似乎不起作用，即使我使用相对路径也是如此
2. SCSS无法识别属性composes
3. 有没有比这更好的方法来组成模块？我正在从JS中的CSS切换到CSS模块，但我真的很怀念用情感或样式化组件组成组件是多么容易

Answer 1

在src/ProfilePage/Profile.module.scss中

@import '/ProfileImage.module.scss' /* your ProfileImage scss file path */
.profileImage {
@extend .profileImage;
outline: 1px solid red;
}

这将工作