[Bug] Issue with SASS - either does not apply it or it breaks

[consuelo-sanna]

Describe the bug

Good morning, I have an internal React library and I'm trying to setup storybook for it. I need to use SASS so I come up to this addons, but even following the documentation I always end up having the same error. I've followed several possible solution through SO and github issues, but either storybook runs but styles are not applied, or I get the following issue:

ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[13].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss Module build failed (from ./node_modules/sass-loader/dist/cjs.js): expected "{". ╷ 2 │ import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; │ ^ ╵ src/styles/main.scss 2:98 root stylesheet

can someone point me to the right direction? Every help of suggestion is more than welcome!

Expected behavior

Storybook runs and sass/styles are applied

Dev dependencies

"@chromatic-com/storybook": "^1.9.0", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-image": "^3.0.3", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@storybook/addon-essentials": "^8.3.6", "@storybook/addon-interactions": "^8.3.6", "@storybook/addon-links": "^8.3.6", "@storybook/addon-onboarding": "^8.3.6", "@storybook/addon-styling-webpack": "^1.0.0", "@storybook/addon-webpack5-compiler-swc": "^1.0.5", "@storybook/blocks": "^8.3.6", "@storybook/react": "^8.3.6", "@storybook/react-webpack5": "^8.3.6", "@storybook/test": "^8.3.6", "@trivago/prettier-plugin-sort-imports": "^3.3.0", "@types/node": "18.0.0", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "axios": "1.6.8", "babel-loader": "^8.2.5", "css-loader": "^7.1.2", "esbuild": "^0.11.18", "eslint": "8.18.0", "eslint-config-next": "^13.1.1", "eslint-plugin-storybook": "^0.5.13", "file-loader": "^6.2.0", "npm-run-all": "^4.1.5", "postcss": "^8.4.47", "prettier": "^2.7.1", "rollup": "^3.20.2", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-delete": "^2.0.0", "rollup-plugin-dts": "^5.3.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-typescript2": "^0.34.1", "sass": "^1.80.4", "sass-loader": "^16.0.2", "storybook": "^8.3.6", "style-loader": "^4.0.0", "tslib": "^2.8.0", "typescript": "4.7.4"

Additional context

This is a private library so I can't share the entire package, I'll try to add the file that I think are meaningful to this error, let me know if it's not clear and I'll try to give more context/info

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-webpack5-compiler-swc',
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-styling-webpack',
    {
      name: '@storybook/addon-styling-webpack', // why does not this work?
      options: {
        rules: [
          // Replaces any existing Sass rules with given rules
          {
            test: /\.s[ac]ss$/i,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: { implementation: require.resolve('sass') },
              },
            ],
            exclude: /node_modules/,
          },
        ],
      },
    },
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
  }),
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: async (config) => {
    config.module?.rules?.push(
      {
        test: /\.scss$/,
        use: [
          'style-loader', // Injects CSS into the DOM
          'css-loader', // Resolves `@import` and `url()` like `import/require()`
          'sass-loader', // Loads and compiles Sass/SCSS files
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              publicPath: 'fonts/',
              esModule: false,
            },
          },
        ],
      },
    );

    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        '@': path.resolve(__dirname, '../src/'),
      },
    };

    return config;
  },
};

export default config;

.storybook/preview.ts

import '../src/styles/main.scss';
import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

main.scss

@import "./xyz/styles.scss";
@import "./xyz/printview.scss";

.react-slidedown.xyz-dropdown-slidedown {
    transition-duration: 1s;
    overflow-x: hidden;
}

styles.scss

// core Variables
@import 'core-components/variables';
@import 'core-components/mixins';
@import 'core-components/hco_fonts';

// XYZ Variables
@import 'components/xyz-fonticons';
@import 'core-components/xyz-mixins';

// Core
@import 'core-components/core';
@import 'core-components/globals';

// Common Components
@import 'components/aria_select';

_hco_fonts.scss

@font-face {
    font-family: 'HCo Gotham';
    src:url('#{$fa-font-path}/hco_fonts/woff2/Gotham-Light_Web.woff2') format('woff2'),
        url('#{$fa-font-path}/hco_fonts/woff/Gotham-Light_Web.woff') format('woff'),
        url('#{$fa-font-path}/Gotham-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

[tiffmaelite]

@consuelo-sanna I have been struggling for a few days with apparently the same issue (Storybook 8, React framework, scss apparently not processed when only adding the webpack styling addon, and same exception as you when I defined a custom rule for sass and scss files with this addon). Here is what I discovered.

• Regarding your affirmation that "it breaks": if you run storybook with options '--debug' and '--debug-webpack' you will see the printed final webpack rules, and you will notice that the issue comes from the fact that the scss files are processed twice. This is actually implicitly told in the error message ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[13].use[2]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss You can see in here that webpack tries to run sass-loader twice (and css-loader and style-loader in between, and again css-loader once more). In your particular example, I see that you have rules for processing scss files both in the webpackFinal config section and in the addon options. This is why webpack tries to process them twice (from last rule to first rule), and fails on the second run of sass-loader on the already processed files.
• Regarding your affirmation that "it does not apply", did you try having very simple SASS content in your main.scss file, for example with a simple SASS variable evaluation? When I did that, then I could see that the SASS variable was correctly interpreted and that the styling rule was applied! This helped me focus on what could actually cause the more complex content to not be properly evaluated.

As a side note for people who may come across a similar issue in the future without having explicitly defined redundant rules implying sass-loader on the same files: check the config rules added by other Storybook addons! In my case, the conflict came not from my own rules but from the react preset addon, which already defines rules for processing styling (and my custom rules were added to the ones provided by the react preset addon!) I am not sure that the styling webpack addon is actually needed at all when using the preset react addon. I gave a try without this addon and only with the present react addon and it just worked when I had a scss file with following content:

body {
  color: $body-color !important;
}

(now, I only need to figure out which parts of my complex scss are causing the whole of it to be ignored...)