Module Configuration and Theme Overrides

Sass modules can expose configurable variables by declaring defaults with !default. Consumers can configure those variables when loading a module with @use and a with clause.

This approach is useful for white-label applications, component libraries, and design systems that allow a consumer to override approved brand tokens.

Module configuration must occur when the module is first loaded. A module cannot be independently configured multiple times with conflicting configurations within the same compilation context.

Keep configurable values focused on stable customization points. Exposing every internal variable makes the module's public API difficult to maintain.

Configure a Theme Module

// themes/_theme.scss
$brand-color: #5b5bd6 !default;
$surface-color: #ffffff !default;
$text-color: #222222 !default;

.button {
  background: $brand-color;
  color: white;
}

// customer.scss
@use "themes/theme" with (
  $brand-color: #00695c,
  $surface-color: #f5f5f5,
  $text-color: #202020
);

💡 The theme module defines defaults for configurable values. The consuming stylesheet supplies replacements when loading the module. The example illustrates the configuration pattern; in a real project, ensure the module is loaded in the intended compilation entry point and that any emitted component rules are appropriate for that entry point.

Knowledge Check

Which Sass feature allows consumers to configure eligible module variables when loading a module?

Module Configuration and Theme Overrides

STAY UPDATED WITH BYTES!