CODEWITHSUNDEEP
csswebpacksasscreate-react-appcss-modules
user5902649
user5902649

Reputation:

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

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.

Upvotes: 1

Views: 1583

Answers (1)

Monzoor Tamal
Monzoor Tamal

Reputation: 810

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

Upvotes: 1

Related Questions