30 lines
1.6 KiB
Markdown
30 lines
1.6 KiB
Markdown
# ADR 0012: SCSS Strategy — Bootstrap Variable Overrides and Sass @import Deprecation
|
|
|
|
**Date:** 2026-04-26
|
|
**Status:** Accepted (workaround pending Bootstrap 6)
|
|
|
|
## Context
|
|
|
|
Bootstrap 5 relies on Sass's `@import` rule and `!default` variable overrides: our custom `_variable.scss` must be loaded before Bootstrap's `variables.scss` so that Bootstrap picks up our values via `!default`.
|
|
|
|
Dart Sass 1.80+ deprecates `@import` in favour of the `@use` module system. The `@use` system uses isolated module scopes, which breaks the `!default` override mechanism: variables loaded via `@use` in our file do not flow into Bootstrap's module scope.
|
|
|
|
Migrating to `@use` for the Bootstrap import chain would require either:
|
|
|
|
- Waiting for Bootstrap 6, which is expected to adopt `@use` natively.
|
|
- Rewriting the entire Bootstrap variable override mechanism using `@use "bootstrap" with (...)`.
|
|
|
|
Neither option is viable in the short term.
|
|
|
|
## Decision
|
|
|
|
- Suppress the Sass `@import` deprecation warning in `angular.json` via `stylePreprocessorOptions.sass.silenceDeprecations: ["import"]`.
|
|
- Keep the existing `@import`-based Bootstrap loading chain intact.
|
|
- Fix other Dart Sass deprecations properly: `color.red/green/blue()` replaced with `color.channel()`, global `if()` replaced with `@if`/`@else`.
|
|
|
|
## Consequences
|
|
|
|
- **Positive:** Bootstrap customisation works correctly with no behaviour change.
|
|
- **Negative:** Deprecation silenced rather than fixed. `@import` will be removed in Dart Sass 3.0.
|
|
- **Future action:** When Bootstrap 6 is released with `@use` support, migrate the import chain and remove the `silenceDeprecations` entry. Supersede this ADR at that point.
|