How to define a dynamic variable externally with SCSS/CSS Modules using NextJS

I would like the content editor to define the primary colors of the website via Headless CMS, using NextJS with preferable sass modules. Here is an example of it's purpose to give you an idea of what I'm trying to achieve

// style.module.scss

import fromHeadless './api/MyHeadlessCMS'

$color_primary: ${fromHeadless.primaryColor}
$color_secondary: ${fromHeadless.secondaryColor}
$color_text_body: #000;

.title{
    color:$color_primary
}

.paragraph{
    color:$color_text_body
}

See ${fromHeadless.primaryColor}

// Mycomponent

import style from 'style.module.scss'

const MyComponent = () => {

    return(
        <div>
            <h1 className={style.title}>Hey hey</h1>
            <p className={style.paragraph}>Something good</p>
        </div>
        )

}

export default MyComponent

So I know it is not possible to import js into a scss file, but I'm just trying find a solution with the outcome of using a dynamic scss/css variable defined outside of the sass file.