css - CSS 模块组成的规则在 create-react-app 中不起作用

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. 有没有比这更好的组合模块的方法？我正在从 CSS-in-JS 切换到 CSS 模块，但我真的很怀念用情感或样式组件组合组件是多么容易。

标签： csswebpacksasscreate-react-appcss-modules

Answer 1

在src/ProfilePage/Profile.module.scss

@import '/ProfileImage.module.scss' /* your ProfileImage scss file path */

.profileImage {
   @extend .profileImage;
   outline: 1px solid red;
}

这会起作用