title: How to setup Storybook with Create React App to use global sass mixins
body: <p>I have an app made with Create React App, and want to use Storybook with it.</p>
  <p>My app uses scss modules, so I am using <a href="https://www.npmjs.com/package/@craco/craco" rel="nofollow noreferrer">CRACO</a> to ensure my global scss variables and mixins are available in my scss modules. My CRACO config looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>const sassResourcesLoader = require('craco-sass-resources-loader');
  const sassInject = require.resolve('./src/css/global.scss');
  
  module.exports = {
    plugins: [
      {
        plugin: sassResourcesLoader,
        options: {
          resources: sassInject,
        },
      },
    ],
  };
  </code></pre>
  <p>Of course, this config is not used by Storybook.</p>
  <p>The default storybook config files look like the following:</p>
  <pre class="lang-js prettyprint-override"><code>// .storybook/main.js
  module.exports = {
    stories: [
      '../src/**/*.stories.mdx',
      '../src/**/*.stories.@(js|jsx|ts|tsx)'
    ],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@storybook/preset-create-react-app'
    ],
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// .storybook/preview.js
  export const parameters = {
    actions: { argTypesRegex: &quot;^on[A-Z].*&quot; },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  }
  </code></pre>
  <p>I found some documentation that suggested something along the lines of these, which should allow adding the config I'm using with CRACO into storybook:</p>
  <pre class="lang-js prettyprint-override"><code>// .storybook/main.js
  const sassResourcesLoader = require('craco-sass-resources-loader');
  const sassInject = require.resolve('../src/css/global.scss');
  
  module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
    webpackFinal: (config) =&gt; {
      config.plugins.push({
        plugin: sassResourcesLoader,
        options: {
          resources: sassInject,
        },
      });
      return config;
    },
  };
  </code></pre>
  <p>Unfortunately this just results in errors:</p>
  <pre><code>info @storybook/react v6.2.9
  info 
  info =&gt; Loading presets
  info =&gt; Serving static files from ./public at /
  info =&gt; Loading 1 config file in &quot;/Users/Me/myApp/.storybook&quot;
  info =&gt; Loading 7 other files in &quot;/Users/Me/myApp/.storybook&quot;
  info =&gt; Adding stories defined in &quot;/Users/Me/myApp/.storybook/main.js&quot;
  info =&gt; Using prebuilt manager
  info =&gt; Loading Webpack configuration from `node_modules/react-scripts`
  info =&gt; Removing existing JavaScript and TypeScript rules.
  info =&gt; Modifying Create React App rules.
  info =&gt; Using default Webpack4 setup
  ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
  ERR!  - configuration.plugins[14] misses the property 'apply'.
  ERR!    function
  ERR!    -&gt; The run point of the plugin, required method.
  ERR!     at Object.webpack [as get] (/Users/Me/myApp/node_modules/webpack/lib/webpack.js:31:9)
  ERR!     at Object.start (/Users/Me/myApp/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
  ERR!     at async Promise.all (index 0)
  ERR!     at async storybookDevServer (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
  ERR!     at async buildDevStandalone (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
  ERR!     at async buildDev (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
  ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
  ERR!  - configuration.plugins[14] misses the property 'apply'.
  ERR!    function
  ERR!    -&gt; The run point of the plugin, required method.
  ERR!     at Object.webpack [as get] (/Users/Me/myApp/node_modules/webpack/lib/webpack.js:31:9)
  ERR!     at Object.start (/Users/Me/myApp/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
  ERR!     at async Promise.all (index 0)
  ERR!     at async storybookDevServer (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
  ERR!     at async buildDevStandalone (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
  ERR!     at async buildDev (/Users/Me/myApp/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
  </code></pre>
  <p>How can I successfully get Storybook to import my scss variables and mixins?</p>
  <p>Thanks</p>