refactor(storybook/webpack.config.js): add custom functions

nostalgic-css · Jun 4, 2019 · bd118e236cd5177cd8c25fd7e687d16922ad5aec · bd118e2
1 parent 8fe6d40
commit bd118e236cd5177cd8c25fd7e687d16922ad5aec
Showing 2 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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;