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


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


  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.


@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:
  addons: [
  webpackFinal: async (config) => {
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../")

      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: