title: Storybook with vue - SassError: Undefined variable
body: <p>I am using storybook with Vue. I have some common SCSS I want to use.</p>
  <pre><code>I am using the addon in **main.js**
  
    addons: [
  
      '@storybook/preset-scss'
    ],
  </code></pre>
  <p>This seems to automatically pick up <strong>./src/scss/variables.scss</strong> which for testing I have added</p>
  <pre><code>body {
    border: 10px solid green;
  }
  </code></pre>
  <p>This works and hot reloads too the issue is any variables are not found in my components.</p>
  <p>So my story list.stories.js imports the list component</p>
  <p><strong>import List from '../components/List.vue'</strong></p>
  <p>but within the style block I am trying use a var from the variables.scss.</p>
  <pre><code>&lt;style lang=&quot;scss&quot; scoped&gt;
  .list {
    border: 1px solid  $light-blue;
   
  }
  &lt;/style&gt;
  </code></pre>
  <p>And get the error</p>
  <pre><code>SassError: Undefined variable: &quot;$light-blue&quot;.
          on line 204 of components/src/components/List.vue
  &gt;&gt;   border: 2px solid  $light-blue;
  </code></pre>