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

这似乎不起作用，即使我使用相对路径也是如此。
SCSS 无法识别属性 composes.
还有比这更好的模块组合方式吗？我正在从 CSS-in-JS 切换到 CSS 模块，但我真的很想念用情感或样式组件组合组件是多么容易。

Answer 1

在src/ProfilePage/Profile.module.scss

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

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

这会起作用

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

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

css

sass

webpack

css-modules

create-react-app