将 css 模块与 scss 一起使用

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 结构的上下文中，另一种方法 f.i。使用类会更好。那么@extend指令就可以派上用场了。

Answer 2

不，sass-loader 会先运行然后吐出 plain CSS

CSS 模块采用 CSS 并确定其范围。

将 css 模块与 scss 一起使用

using css modules with scss

sass

css-modules