Import SCSS files as string and store to variable and inject to iframe

How can I import the content of .scss file as a CSS string in Next.js? I need something like this:

// scss file

.bg-red { 
  background-color: red;
}

Use the content as variable:

let styleString = 
.bg-red { 
  background-color: red;
}

And inject it to iframe (I'm using react-frame-component library)

<Frame head={
<style>{styleString}</style>
}>
</Frame>

I need something like this but for scss instead of styled-components: Styled components are not rendering in React Iframe?

I think this might be what I'm looking for, but don't want to modify webpack config as much as possible. https://www.npmjs.com/package/sass-to-string