
When working with CSS modules, there are times global classes need to be styled. The `:global` operator does just that.

To target a single class, it can be passed as an argument to the operator:
```scss
:global(.class_name) {
  // CSS Rules for ".class_name"
}
```

This can be nested in a module class to only apply it to elements with the global class within the module e.g.:
> File: `MyComponent.module.scss`
```scss
.my_component {
  // Module rules

  :global(.class_name) {
    // These rules will be under:
    // ".MyComponent_my_component__##### .class_name"
  }
}
```

Further to this, module classes can also be nested within the global class:
> File: `MyComponent.module.scss`
```scss
.my_component {
  // Module rules

  :global(.class_name) {
    // These rules will be under:
    // ".MyComponent_my_component__##### .class_name"

    .my_component_element {
      // These rules will be under:
      // ".MyComponent_my_component__##### .class_name .MyComponent_my_component_element__#####"
    }
  }
}
```


## Multiple Classes
If there are multiple classes that need to be tarted, a `:global` block can be used:
```scss
:global {
  .this_class_is_global {
    // Some rules for ".this_class_is_global"
  }

  .this_class_is_also_global {
    // Some rules for ".this_class_is_also_global"
  }
}
```

When using `sass`, this also can be used to import another file, for example to qualify a libraries classes under a module
> File: `MyComponent.module.scss`
```scss
@use "sass:meta";

.my_component {
  :global {
    // This will qualify all imported styles as:
    // ".MyComponent_my_component_##### {library classes / selectors}"
    @include meta.load-css("library/styles/file");
  }
}
````


Posts tagged "css modules"

Global Styles in CSS Modules