title: How to use app's sass variables in decorators of storybook (React)
body: <p>I've built a website with Gatsby.js (static website generator with React) and am trying to add storybook to it. </p>
  
  <p>I added a custom webpack config to storybook (following the instruction at <a href="https://storybook.js.org/configurations/custom-webpack-config/" rel="nofollow noreferrer">https://storybook.js.org/configurations/custom-webpack-config/</a>) to load sass and sass-resources, but can't make it work.</p>
  
  <p>Followings are the configurations. I have installed all of the "style-loader", "css-loader", "sass-loader", "sass-resources-loader" as well as "node-sass" for "storybook/react" in addition to those originally added to "gatsby" and "gatsby-plugin-sass" as dependencies.</p>
  
  <p>It will be great if somebody kindly advise. Thank you very much for your help in advance.</p>
  
  <p><strong>structure</strong></p>
  
  <pre><code>root - .storybook - addon.js
                    - config.js
                    - webpack.config.js
       - src        - components        - Component_1     - Component_1.js
                                                          - Component_1.scss
                                                          - Component_1.stories.js
                                        - ...
                    - styles            - _variables.scss
                                        - mixins          - _mixin_1.scs
                                                          - ...
                    - ...
      - ...
  </code></pre>
  
  <p><strong>webpack.config.js</strong> (root/.storybook/webpack.config.js)</p>
  
  <pre><code>const path = require("path");
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          loaders: [
            "style-loader",
            "css-loader",
            "sass-loader",
            {
              loader: "sass-resources-loader",
              options: {
                resources: [
                  "src/styles/_variables.scss",
                  "src/styles/mixins/**/*.scss"
                ]
              },
            },
          ],
          include: path.resolve(__dirname, "../")
        }
      ]
    }
  };
  </code></pre>
  
  <p><strong>component_1.stories.js</strong></p>
  
  <pre><code>import React from "react";
  import { storiesOf } from "@storybook/react";
  import Component_1 from "./Component_1";
  
  storiesOf("Component_1", module)
    .addDecorator(story =&gt; (
      &lt;div style={{backgroundColor: $color-primary}}&gt;
        {story()}
      &lt;/div&gt;
  ))
    .add("default", () =&gt; (
      &lt;Component_1&gt;
        This is Component 1!
      &lt;/Component_1&gt;
  ));
  </code></pre>
  
  <p><strong>error message</strong> (shown on storybook app)</p>
  
  <pre><code>$color is not defined
  
  ReferenceError: $grey is not defined
    at http://localhost:6006/static/preview.bundle.js:80090:33
    at http://localhost:6006/static/preview.bundle.js:57555:14
    at http://localhost:6006/static/preview.bundle.js:57556:16
    at WrapStory.render(http://localhost:6006/static/preview.bundle.js:61197:14)
    at http://localhost:6006/static/preview.bundle.js:44767:21
    at measureLifeCyclePerf (http://localhost:6006/static/preview.bundle.js:44047:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:6006/static/preview.bundle.js:44766:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:6006/static/preview.bundle.js:44793:32)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:6006/static/preview.bundle.js:44333:30)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:6006/static/preview.bundle.js:44229:21)
  </code></pre>
  
  <p>In this case, sass variable "$color-primary" is defined in "src/styles/_variables.scss". I want to use it to style the Component_1 shown in the storybook app. </p>
  
  <p>I tried importing "_variables.scss" expressly to "Component_1.stories.js" and failed again (Skiped "sass-resources-loader", just used "sass-loader").</p>
  
  <p>Thank you for your advices.</p>
  
  <p>[edit]</p>
  
  <p>In addition to above, my storybook config file is as follow.</p>
  
  <p><strong>config.js</strong> (root/.storybook/config.js)</p>
  
  <pre><code>import { configure, addDecorator } from "@storybook/react";
  
  // automatically import all files ending in *.stories.js
  const req = require.context('../src/components', true, /\.stories\.js$/);
  
  function loadStories() {
    req.keys().forEach(filename =&gt; req(filename));
  }
  
  configure(loadStories, module);
  </code></pre>