diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
index 5355c17281..244d99b619 100644
--- a/packages/css/src/components/accordion/accordion.scss
+++ b/packages/css/src/components/accordion/accordion.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-accordion {
   display: flex;
diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
index e1f39d94ef..911abf3fb8 100644
--- a/packages/css/src/components/blockquote/blockquote.scss
+++ b/packages/css/src/components/blockquote/blockquote.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-blockquote {
   margin-block: 0;
diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
index 1fc4231726..9e18fc47b7 100644
--- a/packages/css/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
   margin-block: 0;
diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss
index fb27c4bccb..978666fbcc 100644
--- a/packages/css/src/components/breakout/breakout.scss
+++ b/packages/css/src/components/breakout/breakout.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../grid/grid";
-@import "../grid/mixins";
+@use "../../common/breakpoint" as *;
+@use "../grid/grid" as *;
+@use "../grid/mixins" as *;
 
 $ams-breakout-row-span-max: 4;
 
diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
index baf5276da5..1dbdce57e0 100644
--- a/packages/css/src/components/button/button.scss
+++ b/packages/css/src/components/button/button.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;
diff --git a/packages/css/src/components/character-count/character-count.scss b/packages/css/src/components/character-count/character-count.scss
index e359156634..b838676a38 100644
--- a/packages/css/src/components/character-count/character-count.scss
+++ b/packages/css/src/components/character-count/character-count.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-character-count {
   color: var(--ams-character-count-color);
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
index e2c93e2863..71877569f8 100644
--- a/packages/css/src/components/checkbox/checkbox.scss
+++ b/packages/css/src/components/checkbox/checkbox.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/input-label-focus";
-@import "../../common/hide-input";
-@import "../../common/text-rendering";
+@use "../../common/input-label-focus" as *;
+@use "../../common/hide-input" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-checkbox__input {
   @include hide-input;
diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
index 8094a40840..137c162c23 100644
--- a/packages/css/src/components/column/column.scss
+++ b/packages/css/src/components/column/column.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "../../common/size" as *;
 
 .ams-column {
   display: flex;
diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss
index b7022e7722..e19f30be63 100644
--- a/packages/css/src/components/date-input/date-input.scss
+++ b/packages/css/src/components/date-input/date-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index abbdd6dd1d..ce8a678d3d 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../../common/text-rendering";
+@use "../../common/breakpoint" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-dl {
   margin-block: 0;
diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss
index bdc789802b..b688421cc9 100644
--- a/packages/css/src/components/error-message/error-message.scss
+++ b/packages/css/src/components/error-message/error-message.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-p {
   margin-block: 0;
diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss
index 9ee7d329b9..2e4328e126 100644
--- a/packages/css/src/components/field-set/field-set.scss
+++ b/packages/css/src/components/field-set/field-set.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-fieldset {
   border: 0;
diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
index 4b73941f5f..c90b269461 100644
--- a/packages/css/src/components/file-input/file-input.scss
+++ b/packages/css/src/components/file-input/file-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;
diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss
index b5e2b5ee2a..6d5ad3aef6 100644
--- a/packages/css/src/components/gap/gap.scss
+++ b/packages/css/src/components/gap/gap.scss
@@ -3,13 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "sass:map";
+@use "../../common/size" as *;
 
 [class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map-keys($ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-gap--#{$size} {
       grid-gap: var(--ams-gap-#{$size}) !important;
diff --git a/packages/css/src/components/grid/_mixins.scss b/packages/css/src/components/grid/_mixins.scss
index 7d1a55922f..d7797cdb74 100644
--- a/packages/css/src/components/grid/_mixins.scss
+++ b/packages/css/src/components/grid/_mixins.scss
@@ -1,3 +1,5 @@
+@use "../../common/breakpoint" as *;
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 33185a2964..91107b2ed0 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "mixins";
+@use "../../common/breakpoint" as *;
+@use "mixins" as *;
 
 $ams-grid-column-count: 12;
 
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 1014dbb3a3..7c80af5d0a 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-header {
   align-items: center;
diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
index 3eb185c147..ee567e0465 100644
--- a/packages/css/src/components/heading/heading.scss
+++ b/packages/css/src/components/heading/heading.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-hx {
   margin-block: 0;
diff --git a/packages/css/src/components/image-slider/image-slider.scss b/packages/css/src/components/image-slider/image-slider.scss
index 36a87b3aa7..ccb18d05c7 100644
--- a/packages/css/src/components/image-slider/image-slider.scss
+++ b/packages/css/src/components/image-slider/image-slider.scss
@@ -2,7 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-image-slider {
   display: grid;
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index 995f0179fe..e74f7e2d99 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -4,66 +4,66 @@
  */
 
 /* Append here */
-@import "./action-group/action-group";
-@import "./breakout/breakout";
-@import "./hint/hint";
-@import "./password-input/password-input";
-@import "./form-error-list/form-error-list";
-@import "./image-slider/image-slider";
-@import "./table-of-contents/table-of-contents";
-@import "./error-message/error-message";
-@import "./file-input/file-input";
-@import "./field/field";
-@import "./select/select";
-@import "./time-input/time-input";
-@import "./date-input/date-input";
-@import "./document/document";
-@import "./avatar/avatar";
-@import "./character-count/character-count";
-@import "./description-list/description-list";
-@import "./row/row";
-@import "./radio/radio";
-@import "./tabs/tabs";
-@import "./text-area/text-area";
-@import "./column/column";
-@import "./margin/margin";
-@import "./gap/gap";
-@import "./field-set/field-set";
-@import "./link-list/link-list";
-@import "./badge/badge";
-@import "./table/table";
-@import "./mega-menu/mega-menu";
-@import "./icon-button/icon-button";
-@import "./skip-link/skip-link";
-@import "./overlap/overlap";
-@import "./header/header";
-@import "./mark/mark";
-@import "./text-input/text-input";
-@import "./search-field/search-field";
-@import "./logo/logo";
-@import "./dialog/dialog";
-@import "./image/image";
-@import "./pagination/pagination";
-@import "./accordion/accordion";
-@import "./alert/alert";
-@import "./aspect-ratio/aspect-ratio";
-@import "./blockquote/blockquote";
-@import "./breadcrumb/breadcrumb";
-@import "./button/button";
-@import "./card/card";
-@import "./checkbox/checkbox";
-@import "./label/label";
-@import "./grid/grid";
-@import "./heading/heading";
-@import "./spotlight/spotlight";
-@import "./icon/icon";
-@import "./link/link";
-@import "./ordered-list/ordered-list";
-@import "./page-heading/page-heading";
-@import "./page-menu/page-menu";
-@import "./paragraph/paragraph";
-@import "./screen/screen";
-@import "./switch/switch";
-@import "./top-task-link/top-task-link";
-@import "./unordered-list/unordered-list";
-@import "./visually-hidden/visually-hidden";
+@use "action-group/action-group";
+@use "breakout/breakout";
+@use "hint/hint";
+@use "password-input/password-input";
+@use "form-error-list/form-error-list";
+@use "image-slider/image-slider";
+@use "table-of-contents/table-of-contents";
+@use "error-message/error-message";
+@use "file-input/file-input";
+@use "field/field";
+@use "select/select";
+@use "time-input/time-input";
+@use "date-input/date-input";
+@use "document/document";
+@use "avatar/avatar";
+@use "character-count/character-count";
+@use "description-list/description-list";
+@use "row/row";
+@use "radio/radio";
+@use "tabs/tabs";
+@use "text-area/text-area";
+@use "column/column";
+@use "margin/margin";
+@use "gap/gap";
+@use "field-set/field-set";
+@use "link-list/link-list";
+@use "badge/badge";
+@use "table/table";
+@use "mega-menu/mega-menu";
+@use "icon-button/icon-button";
+@use "skip-link/skip-link";
+@use "overlap/overlap";
+@use "header/header";
+@use "mark/mark";
+@use "text-input/text-input";
+@use "search-field/search-field";
+@use "logo/logo";
+@use "dialog/dialog";
+@use "image/image";
+@use "pagination/pagination";
+@use "accordion/accordion";
+@use "alert/alert";
+@use "aspect-ratio/aspect-ratio";
+@use "blockquote/blockquote";
+@use "breadcrumb/breadcrumb";
+@use "button/button";
+@use "card/card";
+@use "checkbox/checkbox";
+@use "label/label";
+@use "grid/grid";
+@use "heading/heading";
+@use "spotlight/spotlight";
+@use "icon/icon";
+@use "link/link";
+@use "ordered-list/ordered-list";
+@use "page-heading/page-heading";
+@use "page-menu/page-menu";
+@use "paragraph/paragraph";
+@use "screen/screen";
+@use "switch/switch";
+@use "top-task-link/top-task-link";
+@use "unordered-list/unordered-list";
+@use "visually-hidden/visually-hidden";
diff --git a/packages/css/src/components/label/label.scss b/packages/css/src/components/label/label.scss
index 53ab1f55a4..f69e82209e 100644
--- a/packages/css/src/components/label/label.scss
+++ b/packages/css/src/components/label/label.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-label {
   color: var(--ams-label-color);
diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
index 450968b00b..bbe89d58e0 100644
--- a/packages/css/src/components/link-list/link-list.scss
+++ b/packages/css/src/components/link-list/link-list.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
   list-style: none;
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
index 8ce355a48c..cdeded0c22 100644
--- a/packages/css/src/components/link/link.scss
+++ b/packages/css/src/components/link/link.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-link {
   color: var(--ams-link-color);
diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss
index 45b9953919..6fee9d553b 100644
--- a/packages/css/src/components/margin/margin.scss
+++ b/packages/css/src/components/margin/margin.scss
@@ -3,9 +3,10 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "sass:map";
+@use "../../common/size" as *;
 
-@each $size in map-keys($ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-mb--#{$size} {
       margin-block-end: var(--ams-margin-#{$size}) !important;
diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss
index 3ac1f633f0..c104507de0 100644
--- a/packages/css/src/components/ordered-list/ordered-list.scss
+++ b/packages/css/src/components/ordered-list/ordered-list.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
   list-style-type: none;
diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
index a982fcee05..a51aa9e2ab 100644
--- a/packages/css/src/components/page-heading/page-heading.scss
+++ b/packages/css/src/components/page-heading/page-heading.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-h1 {
   margin-block: 0;
diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss
index 3ca0ac7b17..57e3466894 100644
--- a/packages/css/src/components/page-menu/page-menu.scss
+++ b/packages/css/src/components/page-menu/page-menu.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
   margin-block: 0;
diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss
index ab63116416..4ac40cd44b 100644
--- a/packages/css/src/components/pagination/pagination.scss
+++ b/packages/css/src/components/pagination/pagination.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
   list-style-type: none;
diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss
index 8b9108021a..a6abf28e70 100644
--- a/packages/css/src/components/paragraph/paragraph.scss
+++ b/packages/css/src/components/paragraph/paragraph.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-p {
   margin-block: 0;
diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss
index 902b82f255..27102085e4 100644
--- a/packages/css/src/components/password-input/password-input.scss
+++ b/packages/css/src/components/password-input/password-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
index a9ba889b1f..9a60153556 100644
--- a/packages/css/src/components/radio/radio.scss
+++ b/packages/css/src/components/radio/radio.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/input-label-focus";
-@import "../../common/hide-input";
-@import "../../common/text-rendering";
+@use "../../common/input-label-focus" as *;
+@use "../../common/hide-input" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-radio__input {
   @include hide-input;
diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss
index 943401dc44..ac8ef1ea09 100644
--- a/packages/css/src/components/row/row.scss
+++ b/packages/css/src/components/row/row.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "../../common/size" as *;
 
 .ams-row {
   display: flex;
diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
index 56c378fd90..43ea03ca62 100644
--- a/packages/css/src/components/search-field/search-field.scss
+++ b/packages/css/src/components/search-field/search-field.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-search-field {
   display: flex;
diff --git a/packages/css/src/components/switch/switch.scss b/packages/css/src/components/switch/switch.scss
index 827b1efdfb..65d82d3c44 100644
--- a/packages/css/src/components/switch/switch.scss
+++ b/packages/css/src/components/switch/switch.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/input-label-focus";
-@import "../../common/hide-input";
+@use "../../common/input-label-focus" as *;
+@use "../../common/hide-input" as *;
 
 .ams-switch__input {
   @include hide-input;
diff --git a/packages/css/src/components/table-of-contents/table-of-contents.scss b/packages/css/src/components/table-of-contents/table-of-contents.scss
index b312071d3c..5c0740f54f 100644
--- a/packages/css/src/components/table-of-contents/table-of-contents.scss
+++ b/packages/css/src/components/table-of-contents/table-of-contents.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
   margin-block: 0;
diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index 3c4b8f10b2..278921c595 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 @mixin reset-button {
   background-color: transparent;
diff --git a/packages/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss
index 0587b12d12..ba165dcfc0 100644
--- a/packages/css/src/components/text-area/text-area.scss
+++ b/packages/css/src/components/text-area/text-area.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-textarea {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss
index 0ee5b3ee81..934407a5f3 100644
--- a/packages/css/src/components/text-input/text-input.scss
+++ b/packages/css/src/components/text-input/text-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss
index 10c41af4d2..2469c079e5 100644
--- a/packages/css/src/components/time-input/time-input.scss
+++ b/packages/css/src/components/time-input/time-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss
index b1418d6215..5be5f0c304 100644
--- a/packages/css/src/components/top-task-link/top-task-link.scss
+++ b/packages/css/src/components/top-task-link/top-task-link.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-top-task-link {
   break-inside: avoid;
diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss
index d602dda30f..7c29691216 100644
--- a/packages/css/src/components/unordered-list/unordered-list.scss
+++ b/packages/css/src/components/unordered-list/unordered-list.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
   list-style: none;