reactjs - 如何覆盖纱线 monorepo 中共享组件的全局 sass 变量？

Question

我最近设置了一个 yarn monorepo，其中包括一个用 react 编写的包“shared-ui”，其中包含在其他几个基于 next.js 的 monorepo 包中使用的所有共享组件。

（我的整体设置与这篇中等帖子中的设置几乎相同：https ://medium.com/frontend-digest/using-nextjs-in-a-monorepo-e011ff1826f5 ）

包“shared-ui”中的组件如下所示：

import React from "react"
import styles from "./Button.module.scss"

const Button = ({ className, ...props }) => {
  return (
    <button className={`${styles.global} ${className}`} {...props}>
      {props.children}
    </button>
  )
}

export default Button

monorepo 中的另一个包导入它并添加一些自定义样式。

import styles from "./index.module.scss"

export default function Home() {
  return <Button className={styles.button}>Hello World</Button>
}

现在 shared-ui 包含一堆 sass 变量，例如“@primary-color”，我希望能够在导入包中以某种方式覆盖它们。现在上面的设置只允许我通过一堆额外的代码/scss基本上覆盖这样的全局变量。

因此，为了简短起见，是否有某种方法可以通过在导入包中以某种方式将全局变量定义为共享 ui 的“@primary-color”？

标签： reactjssassnext.jsmonorepo