[Bug] can't load scss file

[spider9375]

in my theme provider i have an import import breakpoints from "../../sass/variables/_breakpoints.scss";

which has

`$_XXS: 320;
$_XS: 414;
$_XS_SM: 568;
$_SM: 768;
$_SM_MD: 960;
$_MD: 1024;
$_MD_LG: 1280;
$_LG: 1366;
$_XL: 1920;

$XXS: #{$_XXS}px;
$XS: #{$_XS}px;
$XS_SM: #{$_XS_SM}px;
$SM: #{$_SM}px;
$SM_MD: #{$_SM_MD}px;
$MD: #{$_MD}px;
$MD_LG: #{$_MD_LG}px;
$LG: #{$_LG}px;
$XL: #{$_XL}px;

:export {
  XXS: $_XXS;
  XS: $_XS;
  XS_SM: $_XS_SM;
  SM: $_SM;
  SM_MD: $_SM_MD;
  MD: $_MD;
  MD_LG: $_MD_LG;
  LG: $_LG;
  XL: $_XL;
}

when i start storybook i get "Cannot read properties of undefined (reading 'XS')"

Is this addon supposed to fix this or where should i go?

    "sass-loader": "^13.3.2",
    "node-sass": "^6.0.1",
    "postcss": "^8.1.6",

[spider9375]

{
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  implementation: require.resolve('sass'),
                  sassOptions: {
                    includePaths: ['node_modules'],
                    additionalData: `@import "src/lib/styles/sass/theme.scss";`
                  },
                },
              },
            ],
          },
        ],
      },
    },

[ShaunEvening]

Hi @spider9375 👋

I don't have a lot of context on this :export { ... } syntax but it looks like an old form of css modules called icss which could be configured through the css-loader like so:

{
  loader: 'css-loader',
  options: {
    modules: {
      mode: 'icss',
    },
  },
},

You can read more about it in the css-loader documentation.

However, if you're up for a change, I'd recommend looking into style-dictionary. It lets you define you design tokens in plain json files and then generates consumable files for scss and JS/TS to import and use.