More than 1 year has passed since last update.

CSS Modules で :global を使うと「Error: Missing whitespace after :global」と言われてしまう件

Posted at 2023-03-08

下記のような書き方をすると Error: Missing whitespace after :global と言われてしまった。
書き方は間違えてないはずなんだけどなあ。

test.module.scss

.container {
  :global {
    &.active {
      color: red;
    }
  } 
}

どうやら css-loader に含まれている postcss-modules-local-by-default の不具合らしい。
https://github.com/webpack-contrib/sass-loader/issues/507#issuecomment-351065764

PostCSSの設定を変更すれば回避できるらしいけど、気軽に設定を触れる環境ではなかったので書き方で回避した。

test.module.scss

.container {
  &:global(.active) {
    color: red;
  } 
}

ま、これでいいか