How to convert import scss into internal css when working with google amp

I currently have a nextjs component like so, that uses import to retrive and link a stylesheet to the component :-

import { Provider } from 'react-redux'
import { useStore } from '../store'
import '../src/styles/index.scss'

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialCode)
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

Now i'am trying to convert this app into a google amp app. The problem i'am facing this that i'am importing a style sheet like so :-

import '../src/styles/index.scss'

While google - amp expects css to be internal I.E. like so (in the head tag ofcourse)

<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }

  amp-img.grey-placeholder {
    background-color: grey;
  }
</style>

So how do i convert a style import into a internal styles ?

I saw this answer HERE, as i'am using scss and not css and also , i have multiple scss files not just 1 or 2. Also i can't just copy paste the contents of index.scss into my js file as it imports multiple other scss files.