CSS modules composes rule not working in create-react-app

Question

I have two components, each with a CSS module:

---

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;
}

---

and

---

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. This doesn't seem to work, not even when I use relative paths.
2. SCSS doens't recognise the property composes.
3. Is there a better way to compose modules than this? I am switching from CSS-in-JS to CSS modules, but I really miss how easy it was to compose components with emotion or styled-components.

Answer 1

in src/ProfilePage/Profile.module.scss

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

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

this will work