diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 7e5303b..37c486d 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,11 +1,21 @@
 const path = require('path');
+const scssFunctions = require('../scripts/scssFunctions');
 
 module.exports = {
   module: {
     rules: [
       {
         test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader'],
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              functions: scssFunctions,
+            },
+          },
+        ],
         include: path.resolve(__dirname, '../'),
       },
       {
diff --git a/scss/base/variables.scss b/scss/base/variables.scss
index de1fc91..108d051 100644
--- a/scss/base/variables.scss
+++ b/scss/base/variables.scss
@@ -5,8 +5,8 @@ $font-size: 16px !default;
 $base-color: $color-black !default;
 $background-color: $color-white !default;
 
-$cursor-url: url(get-file-as-data-uri('../assets/cursor.png')) !default;
-$cursor-click-url: url(get-file-as-data-uri('../assets/cursor-click.png')) 14 0 !default;
+$cursor-url: url(get-file-as-data-uri("../assets/cursor.png")) !default;
+$cursor-click-url: url(get-file-as-data-uri("../assets/cursor-click.png")) 14 0 !default;
 
 $border-size: 4px !default;