无法在 React 中正确使用 SASS/SCSS 样式

Posted 2023-03-06

【中文标题】无法在 React 中正确使用 SASS/SCSS 样式

【英文标题】：Can't style with SASS/SCSS in React properly

【发布时间】：2021-04-13 14:11:23

【问题描述】：

获取这个 SCSS 样式表：

@import "../vars";

img.userIcon 
  &.regular 
    max-width: 64px;
    max-height: 64px;
  
  &.small 
    max-width: 32px;
    max-height: 32px;
  
  border-radius: 50%;
  border: 2px solid $bg-light;

究竟如何让我的页面识别.regular 或.small？

这是我的UserIcon.tsx，应用了这种样式：

import styles from "../styles/components/UserIcon.module.scss";

type Props = 
    src: string,
    variant?: "regular" | "small"

export default function UserIcon( src, variant = "regular" : Props) 
    return <img className=`$styles.userIcon $variant mb-2` src=src />

现在，这显然行不通，因为在某些地方，类名都混杂在一起，看起来像这样：

<img class="UserIcon_userIcon__1jFAP regular mb-2">

这很奇怪，因为它不会对我导入的 boostrap scss 文件执行此操作。

所以我需要知道：

如何删除类名重命名。 如何正确实现.regular 和.small，使其使用混乱的名称。

【问题讨论】：

这被称为“CSS 模块”，它们是非常非常好的东西。不管你信不信，你想要那些“混乱”的类名。类名成为全局唯一的字符串，允许您在不相互冲突的不同文件中拥有相同的类名。缺点是必须通过导入的 css 对象翻译所有类名。但这是值得的。

【参考方案1】：

将 variant 作为关键参数传递给您的样式对象：

return <img className=`$styles.userIcon $styles[variant] mb-2` src=src />

【讨论】：

这行得通！但是有什么办法可以禁用重命名？

我相信使用 CSS 模块的原因之一是生成唯一的类名以避免名称冲突。 medium.com/@pioul/modular-css-with-react-61638ae9ea3e.

【参考方案2】：

你能试试这样的吗？

@import "../vars";

img.userIcon 
  border-radius: 50%;
  border: 2px solid $bg-light;

img.regular 
    max-width: 64px;
    max-height: 64px;
  
img.small 
    max-width: 32px;
    max-height: 32px;
  

import styles from "../styles/components/UserIcon.module.scss";

type Props = 
    src: string,
    variant?: "regular" | "small"

export default function UserIcon( src, variant = "regular" : Props) 
    return <img className=`$styles.userIcon $styles[variant] mb-2` src=src />

告诉我它是否解决了你的问题

【讨论】：

没有解决我的问题，因为现在它根本不会应用任何样式，甚至边框半径都不会，就好像它根本找不到类一样。

嗯，很奇怪

你可以试试<img className="userIcon" src=src /> plaese

是的，我做到了。有些东西正在改变我的班级名称。这是它们在运行页面时的外观：i.imgur.com/S8MsEz4.png

我现在需要你用什么来配置 scss/sass