Как использовать 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 с ограниченной областью видимости, используя css-модули, они широко поддерживаются и де-факто являются стандартом. Он работает отдельно от SASS, заменяя жестко запрограммированные имена классов уникальным хешем. Вы можете увидеть это как пример компонента pure-css.

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

export const pillClass = styles.pill;

2. Вы можете использовать переменные css для создания умных тем на чистом CSS во время выполнения. Вы можете увидеть пример определения здесь, переопределений здесь и использования здесь.

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

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

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

3. Вы можете импортировать файлы SASS / SCSS для загрузки переменных между файлами. Вы можете увидеть это здесь.
   (Используйте это только для переменных!!)

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

4. Вы можете использовать стилизованные, которые представляют собой типизированную систему 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
использует компонент стиля глобального цвета:
https://bit.dev/bit/base-ui/theme/colors/~code

Надеюсь, это поможет вам.