With styled components how to bring in an external CSS file for createGlobalStyle?

Question

I have a css file and I'm trying to figure out how to bring in and per memory I thought I read this in the docs but I'm getting an error. Given the scrollbar file of:

import styled from 'styled-components'

export const Scrollbar = styled.css`
  html {
    --scrollbarBG: ${({ theme }) => theme.colors.color01};
    --thumbBG: ${({ theme }) => theme.colors.color04};
  }
  body::-webkit-scrollbar {
    width: 16px;
  }
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  }
  body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
  }
  body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 8px;
    border: 4px solid var(--scrollbarBG);
  }
`

My error is:

WebpackError: TypeError: Cannot read property 'withConfig' of undefined

In my theme directory is my GlobalStyles.js:

import { createGlobalStyle } from 'styled-components'

// CSS
import Scrollbar from './Scrollbar'

const GlobalStyles = createGlobalStyle`
  ${Scrollbar}
`

export default GlobalStyles

When I search the docs I'm not seeing it in advanced. Searching the site I've read:

• Import CSS File to Styled Component
• How to move css-in-js (Styled Components) to an external css files during build using webpack - ReactJS
• loading external css file just for one react component
• React + Styled Components: Am I supposed to avoid CSS files altogether?

In styled components what is the correct way to bring in the css file to createGlobalStyle?