Rollup and building everything in my styles folder to a stylesheet and insert it into html

Question

So, I am creating a react component library and the individual scss files within those components are fine... but I also have "global" scss that are "site wide". Because I am using storybook, I am not seeing these "global styles" being applied. My source code shows no "inline css files". Of course, when I grep for "styles" FROM the component, they are built within the js.....

....but I need to also have these "site wide" files... these describe like h1,h2,h3.. spacing etc.. that I just using on the component propers.. ie... className="spacing-lg border-dark" etc..

My goal is to have rollup "build" these scss global files and include them in the html/storybook main site... BUT also export them out for consumption.

rollup config: (I am new to rollup)

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer'
import scss from 'rollup-plugin-scss'
import url from "rollup-plugin-url"
// update input to use @rollup/plugin-multi-entry

export default {
  input: ["src/index.ts", "src/Button/Button.tsx"],
  output: [
    {
      dir: 'build',
      format: "cjs",
      sourcemap: true
    },
    {
      dir: 'build',
      format: "esm",
      sourcemap: true
    }
  ],
  preserveModules: true,
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    copy({
      targets: [
        {
          src: "src/styles/_variables.scss",
          dest: "build",
          rename: "variables.scss"
        },
        {
          src: "src/styles/_typography.scss",
          dest: "build",
          rename: "typography.scss"
        }
      ]
    })
    postcss({
      extract: 'bundle.css',
      plugins: [
        sass({
          insert: true
        })
      ]
    })
  ]
};

so, my goal is to be able to "bring in the components I want from the npm (where this will be built) and also the various css files, variables, colors etc... BUT, the components themselves within storybook needs to reference these "globals" and they are not atm.