title: Compiling SCSS in Storybook with Gatsby
body: <p>I have an existing GatsbyJS project and I want to add Storybook to this project to showcase each separate component. I'm using SCSS in my project, which are being compiled with <code>gatsby-plugin-sass</code>, which works great. However, I can't use my components in Storybook since it cannot compile the <code>SCSS</code> files. </p>
  
  <p>I followed the instructions from both Storybook and GatsbyJS. This is how my storybook/webpack.config.js looks like:</p>
  
  <pre><code>module.exports = ({ config }) =&gt; {
  
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude =
      [
        /node_modules\/(?!(gatsby)\/)/,
      ];
  
    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve('babel-loader');
  
    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve('@babel/preset-react'),
      require.resolve('@babel/preset-env'),
    ];
  
    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve('@babel/plugin-proposal-class-properties'),
  
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      require.resolve('babel-plugin-remove-graphql-queries'),
    ];
  
    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ['browser', 'module', 'main'];
    return config;
  };
  </code></pre>
  
  <p>and my storybook/config.js file looks like this: </p>
  
  <pre><code>import { configure } from '@storybook/react';
  import { action } from '@storybook/addon-actions';
  
  // automatically import all files ending in *.stories.js
  configure(require.context('../src', true, /\.stories\.js$/), module);
  
  // Gatsby's Link overrides:
  // Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
  global.___loader = {
    enqueue: () =&gt; {
    },
    hovering: () =&gt; {
    },
  };
  
  // Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
  global.__PATH_PREFIX__ = '';
  
  // This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
  window.___navigate = pathname =&gt; {
    action('NavigateTo:')(pathname);
  };
  
  </code></pre>
  
  <p>I assume I need to add a sass-loader to the webpack config, however it does feel a bit unnatural to add another custom loader since GatsbyJS already handles my SCSS files. </p>
  
  <p>I've been fiddling with adding sass-loader, css-loader and style-loader to my webpack.config.js, but I couldn't get it to work. </p>
  
  <p>Also Googling this specific situation doesn't give me a lot of hits. I assume I'm not the first person who tries to do this. </p>