title: Use global scss with storybook
body: <p>I am new in Storybook.</p>
  <p>I have a <code>.scss</code> file used in global. I want to import this file from storybook.</p>
  <p>So I made .storybook/config.js file and import scss inside. but it shows me error.</p>
  <h2>Error</h2>
  <pre><code>ERROR in ./styles/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./node_modules/sas
  s-resources-loader/lib/loader.js!./styles/style.scss)
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Invalid CSS after &quot;v&quot;: expected 1 selector or at-rule, was 'var api = require(&quot;'
          on line 1 of C:\Users\Walter\WebstormProjects\closet-next\styles\style.scss
  &gt;&gt; var api = require(&quot;!../node_modules/style-loader/dist/runtime/injectStylesIn
     ^
  
   @ ./styles/style.scss 2:26-346 43:4-64:5 46:18-338
   @ ./.storybook/config.js
   @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.
  storybook/config.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&amp;quiet=true
  
  </code></pre>
  <p>What is problem? Here is main.js</p>
  <h3>main.js</h3>
  <pre><code>const path = require('path');
  
  module.exports = {
    stories: ['../stories/**/*.stories.(js|mdx|tsx)'],
    addons: [
      '@storybook/addon-actions',
      '@storybook/addon-links',
      '@storybook/addon-knobs',
      '@storybook/preset-scss',
      {
        name: '@storybook/preset-typescript',
        options: {
          tsLoaderOptions: {
            configFile: path.resolve(__dirname, './tsconfig.json'),
          },
          forkTsCheckerWebpackPluginOptions: {
            colors: false, // disables built-in colors in logger messages
          },
          include: [path.resolve(__dirname, '/')],
          transpileManager: true,
        },
      },
      {
        name: '@storybook/addon-docs',
        options: {
          configureJSX: true, 
          babelOptions: {},
  
        },
      },
    ],
    parameters: {
      docs: {
        inlineStories: false, 
      },
    },
    webpackFinal: config =&gt; {
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader', 'sass-resources-loader'],
      });
      return config;
    },
  };
  
  </code></pre>