diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index d305a2403..8573c44e3 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -54,7 +54,7 @@ module.exports = ({ config }) => {
   // use style-loader for style-dictionary scss files
   config.module.rules.push({
     test: /\.scss$/,
-    use: ["style-loader"],
+    use: ["sass-loader"],
   });
 
   return config;
diff --git a/package.json b/package.json
index 4623d4a06..e506e8ed2 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,8 @@
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-ts": "^3.4.5",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.1.0",
     "simplex-noise": "^4.0.1",
     "storybook": "^7.6.13",
     "storybook-addon-emotion-theme": "^2.1.1",
diff --git a/yarn.lock b/yarn.lock
index d073cd0cd..2fc7440b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1926,6 +1926,8 @@ __metadata:
     rollup-plugin-css-only: "npm:^4.5.2"
     rollup-plugin-delete: "npm:^2.0.0"
     rollup-plugin-ts: "npm:^3.4.5"
+    sass: "npm:^1.70.0"
+    sass-loader: "npm:^14.1.0"
     simplex-noise: "npm:^4.0.1"
     storybook: "npm:^7.6.13"
     storybook-addon-emotion-theme: "npm:^2.1.1"
@@ -19927,6 +19929,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass-loader@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "sass-loader@npm:14.1.0"
+  dependencies:
+    neo-async: "npm:^2.6.2"
+  peerDependencies:
+    "@rspack/core": 0.x || 1.x
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    sass: ^1.3.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10c0/c7f663ad1fa84e2564659ffba87b89d2ed84eae09a03f78918b3e4499787b78a57d9f157009dda350499b210d4b5c2e7b412692d9087166031c3826a2f176d23
+  languageName: node
+  linkType: hard
+
 "sass@npm:*, sass@npm:^1.23.7":
   version: 1.69.5
   resolution: "sass@npm:1.69.5"
@@ -19940,6 +19968,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.70.0":
+  version: 1.70.0
+  resolution: "sass@npm:1.70.0"
+  dependencies:
+    chokidar: "npm:>=3.0.0 <4.0.0"
+    immutable: "npm:^4.0.0"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 10c0/7c309ee1c096d591746d122da9f1ebd65b4c4b3a60c2cc0ec720fd98fe1205fa8b44c9f563d113b9fdfeb25af1e32ec9b3e048bd4b8e05d267f020953bd7baf0
+  languageName: node
+  linkType: hard
+
 "saxes@npm:^6.0.0":
   version: 6.0.0
   resolution: "saxes@npm:6.0.0"