2

我在当前的应用程序中有一个设计系统......它们都位于一个样式文件夹中。现在，我还有一个组件文件夹，其中包含一个“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？

4

2 回答 2

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

export const pillClass = styles.pill;
  1. 您可以使用css 变量来执行智能运行时纯 css 主题。您可以在此处查看定义示例、在此处覆盖和在此处查看用法。
//definition:
.colors: {
  --base-color: blue;
}

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

// usage:
.label {
  background: var(--base-color);
}
  1. 您可以导入 SASS/SCSS 文件以在文件之间加载变量。你可以在这里看到它。
    （仅用于变量！！）
//pastes the entire theme.colors here.
//(ok for sass variables)
@import '~@bit/bit.base-ui.theme.colors';
  1. 您可以使用stylable，它是一个类型化的 css-modules 系统。它的优点是 css 变量散列和 css 模块之间的导入。

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

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

return <div id="root" className={baseTheme}></div>
于 2020-06-18T20:09:34.000 回答
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-用户界面/主题/颜色/~代码

我希望它可以帮助你。

于 2020-06-18T19:28:50.857 回答