在 scss 中使用 css 模块

Question

我正在使用 css 模块。 每个 css 模块都是一个 scss 文件，如下所示：

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
  &.componentTitle {
    font-size: 18px;
    width: 15%;
    background-color: white;
    margin-top: -25px;
  }
}

在 css 模块中使用 & 是否被认为是一种反模式？

Answer 1

嗯，没有。 请记住，这会迫使您将 html 置于适当的结构中以使其工作。 因此，如果样式仅在此模块中使用而在其他任何地方都不需要，那绝对没问题。 但是如果你在其他地方需要这些样式，在另一个没有合适的 html 结构的上下文中，另一种方法，通过使用类，会更好。 那么@extend指令就可以派上用场了。

Answer 2

不，sass-loader 将首先运行并吐出纯 CSS

CSS 模块接受 CSS 并确定它的范围。