title: Module parse failed: Unexpected character '@' (1:0) with Storybook 6.1.11, Webpack 5.11.0, React 17.0.1
body: <p>Trying to setup a react-app with all latest versions.</p>
  <p><a href="https://github.com/sharathm89/react-app" rel="noreferrer">Github Repo Link</a></p>
  <p>Trying to run storybook with sass file imported will result in below error. Trying to run without importing the styles, storybook works.</p>
  <p>The same code works correctly when its run as <code>npm start run</code> with no warnings and errors.</p>
  <p>I have configured css modules using <strong>@dr.pogodin/babel-plugin-react-css-modules</strong> with sass, webpack 5, react 17 and with latest packages.</p>
  <pre><code>ERROR in ./src/assets/stylesheets/app.scss 1:0
  Module parse failed: Unexpected character '@' (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  &gt; @import &quot;./base.scss&quot;;
  | @import &quot;./generics/font.scss&quot;;
  | @import &quot;./generics/spacing.scss&quot;;
   @ ./stories/index.js 5:0-44 8:2-10:4 8:58-10:3 9:4-49
   @ ./src/components/atoms/button/stories.js
  </code></pre>
  <p><strong>babel.config.js</strong></p>
  <pre><code>module.exports = {
    presets: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;],
    plugins: [
      [
        &quot;@dr.pogodin/babel-plugin-react-css-modules&quot;,
        {
          webpackHotModuleReloading: true,
          autoResolveMultipleImports: true,
          filetypes: {
            &quot;.scss&quot;: {
              syntax: &quot;postcss-scss&quot;,
            },
          },
          generateScopedName: &quot;[name]__[local]___[hash:base64:5]&quot;,
        },
      ],
    ],
  };
  </code></pre>
  <p><strong>webpack.config.js</strong> for css (partial code inlcuded)</p>
  <pre><code>{
          test: /\.(css|sass|scss)$/,
          exclude: /node_modules/,
          use: [
            isDev ? &quot;style-loader&quot; : MiniCssExtractPlugin.loader,
            {
              loader: &quot;css-loader&quot;,
              options: {
                modules: {
                  auto: (resourcePath) =&gt;
                    resourcePath.indexOf(&quot;assets/stylesheets&quot;) === -1,
                  localIdentName:&quot;[name]__[local]___[hash:base64:5]&quot;,
                },
                sourceMap: true,
              },
            },
            &quot;sass-loader&quot;,
          ],
        }
  </code></pre>
  <p><strong>storybook/webpack.config.js</strong> file</p>
  <pre><code>const custom = require('../webpack.config.js');
  
  module.exports = {
    // stories: ['../src/components/**/*.stories.js'],
    webpackFinal: (config) =&gt; {
      return {
        ...config,
        module: {
          rules: custom.module.rules,
        },
        resolve: {
          ...config.resolve,
          ...custom.resolve,
        }
      };
    },
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Alurx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Alurx.png" alt="enter image description here" /></a></p>