CODEWITHSUNDEEP
storybookbit.devbit-src
james emanon
james emanon

Reputation: 11807

How to use with bit.dev with global scss files that my components use?

I got a design system in my current app... and they all sit in a styles folder. Now, I also have a components folders that includes a "designSystem" folder that contains all my reusable components that I want to share across various apps.

The problem is.. this is how my app looks. How do I get globals into bit.dev and then have my component that I put up there, use it? OR is that not how it worls?

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

So, i see tutorials that always have this assumption that EVERYTING in components are self isolated and don't care about outside styles.... BUT how do you use bit.dev with this?

So, I want to put up everything in my DesignSystems folder.... each folder is a component. BUT those items need to know about "styles" and those items there... I am stumped.. what to do?

How do I handle this?

Do I have to go the storybook route and create an app first and put all my components there.. THEN send it up to bit.dev?

Upvotes: 2

Views: 3086

Answers (2)

Uri Kutner
Uri Kutner

Reputation: 506

  1. You can create scoped pure-css components using css-modules, it is widely supported, and de-facto as standard. It works separately from SASS to replace hard coded class names with a unique hash. You can see this as an example of a pure-css component.
import styles from './styles.module.css';

export const pillClass = styles.pill;
  1. You can use css variables to do smart run-time pure-css theming. You can see example of definition here, overrides here, and usage here.
//definition:
.colors: {
  --base-color: blue;
}

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

// usage:
.label {
  background: var(--base-color);
}
  1. You can import SASS/SCSS files to load variables between files. You can see it here.
    (Only use this for variables!!)
//pastes the entire theme.colors here.
//(ok for sass variables)
@import '~@bit/bit.base-ui.theme.colors';
  1. You can use stylable, which a typed css-modules system. Its advantage are css-variable hashing and imports between css modules.

In any case, I would NOT recommend global css, or style imports between files. It is very difficult to keep track of them this way. Instead, you should add specific classes to a dom node, which you can turn on and off separately:

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

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

Upvotes: 4

Josh
Josh

Reputation: 668

you can share the global SCSS files as separate components and use them in the component you need. Let's assume the button use the variables.scss file, so a dependency will be created between the button and the style component.
You can see examples of project exported with Bit:
https://github.com/teambit/base-ui
https://github.com/teambit/evangelist

See how this input component:
https://bit.dev/bit/evangelist/input/input/~code#input.module.scss
is using the global colors style component:
https://bit.dev/bit/base-ui/theme/colors/~code

I hope it may help you.

Upvotes: 2

Related Questions