如何使用 NextJS 通过 SCSS/CSS 模块在外部定义动态变量

Question

我希望内容编辑器通过 Headless CMS 定义网站的主要颜色，使用 NextJS 和更好的 sass 模块。这是一个示例，目的是让您了解我想要实现的目标

// 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
}

看${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

所以我知道不可能将 js 导入到 scss 文件中，但我只是尝试找到一个解决方案，其结果是使用在 sass 文件外部定义的动态 scss/css 变量。