带有 Sass 和 Gatsby 的 CSS 模块答案

【问题标题】：CSS modules with Sass and Gatsby带有 Sass 和 Gatsby 的 CSS 模块
【发布时间】：2020-11-05 12:55:18
【问题描述】：

如何在 Gatsby 中的条件类上将 Sass 与 CSS 模块一起使用？

我尝试了以下方法：

menu.js

import menuStyles from './menu.module.scss';
import classNames from 'classnames';

const Menu = ({ open }) => {
  return (
    <nav className={classNames(menuStyles.menu, { isOpen: open })}>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </nav>
  );
};

menu.module.scss:

.menu {
  background: green;

  &.isOpen {
    background: blue;
  }
}

onClick 事件更新了 open 属性，我可以看到 isOpen 类按预期添加和删除。问题是 CSS 没有应用到它：背景仍然是绿色的。查看 Chrome 网络选项卡，我可以看到样式应用于类 menu-module--isOpen--DyE73 而不仅仅是 isOpen：

.menu-module--menu--2cKbx {
  background: green;
}
.menu-module--menu--2cKbx.menu-module--isOpen--DyE73 {
  background: blue;
}

当不使用 CSS 模块（import './menu.scss'; 和 <nav className={classNames('menu', { isOpen: open })}>）时，样式在这两种情况下都能正确应用。

如何将 Sass 与 CSS 模块一起使用来设置条件 isOpen 类的样式？

【问题讨论】：

标签： sass gatsby css-modules

【解决方案1】：

以下将起作用：

<nav className={classNames(menuStyles.menu, { [menuStyles.isOpen]: open })}>

不同的是我把isOpen换成了[menuStyles.isOpen]（方括号代表computed property names）。

就像menu 一样，CSS 规则isOpen 也有一个动态的、本地范围的名称，因此您需要确保将其名称从 CSS 模块导入到。

【讨论】：