tmp dev
tmp dev

Reputation: 9219

using css modules with scss

I'm using css modules. Each css module is a scss file and looks something like the following:

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

Is it considered an anti-pattern to use & inside css modules?

Upvotes: 1

Views: 777

Answers (2)

Joe Seifi
Joe Seifi

Reputation: 1725

No, sass-loader will run first and spit out plain CSS

CSS modules takes the CSS and scopes it.

Upvotes: 0

philipp
philipp

Reputation: 16505

Well no. Just keep in mind that this forces you to have the html in an appropriate structure to make that work. So in case the styles are only used in this module and not needed anywhere else, that is absolutely fine. But if you need those Styles somewhere else, in another context which does not have the appropriate html structure, another approach, f.i. by using classes, would be better. Then the @extend directive can come in handy.

Upvotes: 1

Related Questions