fix: Re-enable postcss for storybook builds to transpile svg-load (#919)

.storybook/main.js

@@ -19,7 +19,6 @@ module.exports = {
     'storybook-readme',
     '@storybook/addon-knobs',
     '@storybook/addon-storysource',
-    '@storybook/preset-scss',
   ],
   webpackFinal: async config => {
     // Convert mdx links to point to github
@@ -47,6 +46,22 @@ module.exports = {
       enforce: 'pre',
     });
 
+    // Load our scss files with postscss.
+    // Note: This is the same as @storybook/preset-scss, but with postcss added.
+    config.module.rules.push({
+      test: /\.(scss|css)$/,
+      use: [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {importLoaders: 2},
+        },
+        'postcss-loader',
+        'sass-loader',
+      ],
+      include: modulesPath,
+    });
+
     config.plugins.push(new DocgenPlugin());
 
     // Remove progress updates to reduce log lines in Travis

package.json

@@ -22,7 +22,6 @@
     "@storybook/addon-storysource": "^6.1.3",
     "@storybook/addon-viewport": "^6.1.3",
     "@storybook/components": "^6.1.3",
-    "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.1.3",
     "@storybook/source-loader": "^6.1.3",
     "@testing-library/cypress": "^7.0.1",

yarn.lock

@@ -4301,11 +4301,6 @@
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/preset-scss@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@storybook/preset-scss/-/preset-scss-1.0.3.tgz#8ac834545c642dada0f64f510ef08dfb882e9737"
-  integrity sha512-o9Iz6wxPeNENrQa2mKlsDKynBfqU2uWaRP80HeWp4TkGgf7/x3DVF2O7yi9N0x/PI1qzzTTpxlQ90D62XmpiTw==
-
 "@storybook/react@^6.1.3":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.1.3.tgz#558311ea377719d30b118c51c6ad2b8a0efc8971"