[Bug]: Storybook does not read scss variables using NextJS and @storybook/nextjs package

[Gr1mmz]

Describe the bug

I use NextJS 12 with absolute imports, SCSS modules and latest version of Storybook. After add in next.config.js this:

sassOptions: {
    additionalData: `@import 'styles/variables'; @import "styles/mixins";`,
  },

and delete this imports inside all style modules my project works perfect. But Storybook drop me this error in console:

SassError: SassError: Undefined variable.

The same error for all mixins I used.

My main.ts file is very simple:

import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path';
const config: StorybookConfig = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
    },
  },
};
export default config;

And preview.js is simple too:

import '../styles/variables.scss';
import '../styles/mixins.scss';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

---

In preview.js file I've imported scss files like this:

import '../styles/variables.scss';
import '../styles/mixins.scss';

---

I've tried add a webpackFinal config in main.ts file of Storybook for adding the same imports that I add in next.config.js. It gave me an another error:

SassError: SassError: expected "{".
  ╷
2 │       import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                               ^
  ╵
  styles/app.scss 2:95  root stylesheet

Before I delete variables imports from every module file Storybook works great. What am I doing wrong?

To Reproduce

I can't give a reproduction, because this is a commercial project.

System

Environment Info:

  System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.90
  npmPackages:
    @storybook/addon-actions: ^7.0.27 => 7.0.27 
    @storybook/addon-essentials: ^7.0.27 => 7.0.27 
    @storybook/addon-interactions: ^7.0.27 => 7.0.27 
    @storybook/addon-links: ^7.0.27 => 7.0.27 
    @storybook/nextjs: ^7.0.27 => 7.0.27 
    @storybook/react: ^7.0.27 => 7.0.27 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

No response

[Gr1mmz]

UPDATE 07.14. I've rollback changes in next.config.js and and imports in all styles. But now when I run storybook dev it's doesn't load my global reset styles that I have in styles/app.scss. I clear all of my preview.js file and now it has only one line:

import 'styles/app.scss';

Storybook is running, I can see all stories with my styles inside modules scss. But without reset styles it looks ugly.

---

Besides this, in browser console I have strange error

[HMR] bundle 'preview' has 2 warnings
client.js:197 
./node_modules/@storybook/nextjs/dist/chunk-YPQDI6HO.mjs 1:224-231
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/@storybook/nextjs/dist/chunk-YPQDI6HO.mjs 1:353-360
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[Gr1mmz]

UPDATE 07.17 After 3 days of trying I've found the issue. I used sideEffects flag in package.json file for split all next.js pages on chunks and allow tree shaking automaticly. Without this flag Storybook works correctly. When I set sideEffects: false application works perfect in dev and prod mode, but Storybook doesn't load some styles, for example - app.scss file, which I described above.

[Hebmor]

Greetings! I managed to solve the specified problem, everything is the same, only I did not use sideEffects: false in package.json.

The solution was this:

1. Install the package @storybook/addon-styling;
2. Add to main.js such lines:

{
    name: '@storybook/addon-styling',
    options: {
        sass: {
            // Require your Sass preprocessor here
            implementation: require('sass'),
            additionalData: `@import "./src/china/static/vars.scss";
            `,
        },
    }
}

The additionalData string:@import "./src/china/static/vars.scss"; just solves our problem!

This solved the problem, and I did not specify root.scss, but the one that the error led to.

[oxfist]

For anyone running into this issue, @Hebmor solution worked for me too!