diff --git a/assets/material/css/article.scss b/assets/material/css/article.scss
index a3d34d1ad..fc6c961e3 100644
--- a/assets/material/css/article.scss
+++ b/assets/material/css/article.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
    Article
    ========================================================================== */
@@ -54,7 +56,7 @@
     }
 
     a {
-      border-bottom: 1px dotted $blue-accent-color;
+      border-bottom: 1px dotted variables.$blue-accent-color;
       text-decoration: none;
     }
 
diff --git a/assets/material/css/cards.scss b/assets/material/css/cards.scss
index 17e096059..b63fad649 100644
--- a/assets/material/css/cards.scss
+++ b/assets/material/css/cards.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
    Cards
    ========================================================================== */
@@ -73,7 +75,7 @@ main {
 
   .card-entry-labels-hidden li {
     display: inline-block;
-    background-color: $blue-accent-color;
+    background-color: variables.$blue-accent-color;
     margin: 0 5px;
     padding: 5px 12px;
     border-radius: 3px;
@@ -156,7 +158,7 @@ a.original:not(.waves-effect) {
 .card-tag-labels li {
   margin: 10px 10px 10px auto;
   padding: 5px 12px 5px 16px !important;
-  background-color: $blue-accent-color;
+  background-color: variables.$blue-accent-color;
   border-radius: 3px;
   color: #fff;
   cursor: default;
@@ -247,7 +249,7 @@ a.original:not(.waves-effect) {
     }
 
     .chip {
-      background-color: $blue-accent-color;
+      background-color: variables.$blue-accent-color;
       padding: 0 7px;
       margin: auto 1px;
       border-radius: 6px;
diff --git a/assets/material/css/entries.scss b/assets/material/css/entries.scss
index 0db39d7c0..b9cd34a01 100644
--- a/assets/material/css/entries.scss
+++ b/assets/material/css/entries.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
  * Entries
  * ========================================================================== */
@@ -84,7 +86,7 @@
   }
 
   .mass-action-tags-input.mass-action-tags-input.mass-action-tags-input:focus {
-    border-bottom: 3px solid $blue-accent-color;
+    border-bottom: 3px solid variables.$blue-accent-color;
     box-shadow: none;
   }
 }
diff --git a/assets/material/css/index.scss b/assets/material/css/index.scss
index 3de1848f2..c90def53e 100644
--- a/assets/material/css/index.scss
+++ b/assets/material/css/index.scss
@@ -1,18 +1,18 @@
-@import "variables";
+@use "variables";
 
 /* Style */
-@import "article";
-@import "cards";
-@import "entries";
-@import "filters";
-@import "layout";
-@import "nav";
-@import "sidenav";
-@import "various";
-@import "dark_theme";
+@use "article";
+@use "cards";
+@use "entries";
+@use "filters";
+@use "layout";
+@use "nav";
+@use "sidenav";
+@use "various";
+@use "dark_theme";
 
 /* Tools */
-@import "fonts";
-@import "icons";
-@import "print";
-@import "media_queries";
+@use "fonts";
+@use "icons";
+@use "print";
+@use "media_queries";
diff --git a/assets/material/css/layout.scss b/assets/material/css/layout.scss
index d27d20076..b2f72c425 100755
--- a/assets/material/css/layout.scss
+++ b/assets/material/css/layout.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 /* ==========================================================================
    Layout
    ========================================================================== */
@@ -19,7 +21,7 @@ body {
 }
 
 a {
-  color: $blue-accent-color;
+  color: variables.$blue-accent-color;
 }
 
 main,