如何将 bit.dev 与我的组件使用的全局 scss 文件一起使用？

Question

我在当前的应用程序中有一个设计系统......它们都位于一个样式文件夹中。 现在，我还有一个组件文件夹，其中包含一个“designSystem”文件夹，其中包含我想要在各种应用程序之间共享的所有可重用组件。

问题是……这就是我的应用程序的外观。如何将全局变量放入 bit.dev，然后将我的组件放在那里并使用它？或者这不是它的工作方式吗？

app -
----- styles <--- everything under here
---------- variables.scss
---------- typography.scss
---------- mixins.scss
---------- colors.scss
---------- main.scss (imports all of the above)**
----- pages
---------- all my main app pages. about us/products/contact
----- components
--------- DesignSystem <--- everything under here, but these need globals in "styles"
------------- Button
------------------ Button.js
------------------ Button.scss
------------------ index.js
--------- someComponent
--------- someOtherComponent

所以，我看到教程总是假设组件中的每一个都是自我隔离的，不关心外部样式....但是你如何使用 bit.dev 呢？

所以，我想把所有东西都放在我的 DesignSystems 文件夹中……每个文件夹都是一个组件。但是这些项目需要了解“样式”以及那里的那些项目......我很难过......该怎么办？

我该如何处理？

我是否必须按照故事书的路线先创建一个应用程序并将我的所有组件放在那里..然后将其发送到 bit.dev？

Answer 1

1. 您可以使用css-modules 创建作用域 纯css 组件，它受到广泛支持，并且事实上是标准配置。它与 SASS 分开工作，用唯一的哈希替换硬编码的类名。您可以将 this 视为纯 CSS 组件的示例。

import styles from './styles.module.css';

export const pillClass = styles.pill;

1. 您可以使用css variables 进行智能运行时纯css 主题化。您可以查看定义here、覆盖here 和用法here 的示例。

//definition:
.colors: {
  --base-color: blue;
}

//override:
.warningColors {
  --base-color: yellow;
}

// usage:
.label {
  background: var(--base-color);
}

1. 您可以导入 SASS/SCSS 文件以在文件之间加载变量。你可以看到它here.
   （仅用于变量！！）

//pastes the entire theme.colors here.
//(ok for sass variables)
@import '~@bit/bit.base-ui.theme.colors';

4. 您可以使用stylable，这是一个类型化的 css 模块系统。它的优点是 css 变量散列和 css 模块之间的导入。

无论如何，我会不推荐全局 css 或文件之间的样式导入。以这种方式跟踪它们是非常困难的。相反，您应该将特定的类添加到 dom 节点，您可以单独打开和关闭它：

//...
const baseTheme = [colorsDefinition, shadows, margins, cats, dogs].join(' ');

return <div id="root" className={baseTheme}></div>

Answer 2

您可以将全局 SCSS 文件作为单独的组件共享，并在您需要的组件中使用它们。假设按钮使用variables.scss 文件，因此将在按钮和样式组件之间创建依赖关系。
您可以查看使用 Bit 导出的项目示例：
https://github.com/teambit/base-ui
https://github.com/teambit/evangelist

看看这个输入组件如何：
https://bit.dev/bit/evangelist/input/input/~code#input.module.scss
正在使用全局颜色样式组件：
https://bit.dev/bit/base-ui/theme/colors/~code

希望对你有帮助。