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

Question

我现在的应用里有一个设计系统...它们都放在一个样式文件夹里。现在，我还有一个components文件夹，其中包括一个"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主题。您可以查看definition here.

、overrides here和usage here的示例

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

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

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

1. 可以导入SASS/SCSS文件以在文件之间加载变量。你可以在here上看到它。

(仅对variables!!)使用此选项

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

你可以使用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

我希望它能帮助你。