Storybook global scss file with a mixin not working, use global scss in Storybook

So, I got my scss to work, partly, in my storybook globally.

Stack: react/rollup/typescript/storybook

.storybook/preview.js

import { withKnobs } from '@storybook/addon-knobs';
import { addDecorator, addParameters } from '@storybook/react';
import '../src/scss/entry.scss'; // <--- PARTLY WORKING. Variables worrk, spacing no.

addDecorator(withKnobs);

addParameters({
  options: { panelPosition: 'right', theme },
  docs: { extractComponentDescription: (_c, { info }) => info ? info : null },
});

I am getting "global variables" BUT, I am not getting my mixin file that deals with spacing.

scss/entry.scss

@import './spacing.scss'; // <---- NOT WORKING
@import './variables.scss'; // <--- WORKING

spacing.scss is basically a dynamic spacing system that uses mixins that builds out a bunch of padding/spacing variables… this is not working. The file is blank when I view in storybook.

.storybook/main.js (the webpack config for storybook)

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  // Add any Storybook addons you want here: https://storybook.js.org/addons/
  addons: [
    "@storybook/addon-notes/register",
    "@storybook/addon-actions/register",
    "@storybook/addon-knobs/register",
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../")
    });

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("babel-loader"),
      options: {
        presets: [["react-app", { flow: false, typescript: true }]]
      }
    });
    config.resolve.extensions.push(".ts", ".tsx");

    return config;
  }
};

The "spacing" scss file just has a bunch mixins and a couple "@each"…

// a bunch of mixins.... and a few of these.

@each $key, $property in $rules {
  @include spacing-variables($key, $property);
}

These are NOT showing any styles. The "[style] tag" is in the source, just empty.

%d bloggers like this: