Sharing React components using Bit — a quick guide — Part Two, Sass variables

In the previous part, we were introduced to Bit’s basic functionalities. We covered how we can track, tag, export and import a React component, to reuse in other React projects. These processes are quite straightforward and require a small amount of time to get familiar with them.

Export Sass variables as a Bit component

In the first part, we exported a few components from our project. These components use global sass variables that are defined on our project’s configuration as globals and available to use on any scss file.

Let’s take a closer look.

.button {
  // BUTTON
  font-size: $button-text-size;
  letter-spacing: $button-text-letter-spacing;
  cursor: pointer;
  height: $button-height;
  margin: $button-margin-vertical $button-margin-horizontal;
  padding: $button-padding-vertical $button-padding-horizontal;
  border-radius: $button-border-radius;
  border: none;

  outline: none;
  text-transform: uppercase;
  background-color: $button-background;
  color: $button-color;

  &:hover,
  &:focus,
  &:active,
  &:disabled {
    background-color: transparent;
  }

  &.fullWidth {
    width: 100%;
  }
}

The example above is a part of Button component’s stylesheet. It is obvious, that this stylesheet is using sass variables. $button-text-size on line 2 is just one example, and in our components there are numerous examples.

These variables are not explicitly imported, but are available at a global scope in our application, as we mentioned above. It becomes obvious, that these components when exported, won’t have access to those variables (all Bit components are built on an isolated environment and should be able to be used without any configuration).

If we try to export a component that references global Sass variables, Bit won’t let us go through with it, as it will complain that these variables are not defined. First solution that comes to mind might be to copy all variables’ declarations needed to our component’s stylesheet, to make it work independently. But, this would require the same process for every component that uses these variables, and would have different copies of our variables declarations, running the risks of inconsistency between components,versions and having the extra maintenance time of updating variables across all components when one of them changes its value.

A more elegant approach — it couldn’t be less elegant than copying variables all over our components 😅 — is to export these Sass variables as a Bit component, reference this component on all of the rest of the components that need these variables to be rendered properly.

In other words, each component that needs those variables, will have a dependency on our Sass variables component. Let’s see how this works, first let’s track our variables.

A global/variables component is exported that contains all Sass variables

We have successfully tracked our variables and now we will tag and export this component to our private scope.

Component is tracked successfully

1.0.0 version is assigned on the component and then it’s exported and ejected

We have tracked, tagged, exported and ejected our variables component. Now these variables will be available when our component is imported.

Are we done now? No yet, we need to update our variables references because still these variables won’t be available until we correct the importing on our stylesheets.

Line one imports the variables from our newly created Bit component to our titles component

This should be enough for importing the variables! Bit works its magic and tracks this as an external dependency.

Variables are listed as a dependency, as planned

All done!🙏 We can now use Sass variables in our exported Bit components, as long as we import our variables directly from the variables package and the dependency is documented, as above.

Then when we import our styled components, for example titles , the variables component will be imported as a dependency.

Our private scope now looks like this:

Our exported components, notice the “global/variables” component we created in this article

Summary

Bit gives us many possibilities on what we can do with our reusable components, and in this article we created a component that contains all of our sass variables and we defined it as an external dependency to components that need these variables. We were able in the end, to import a component, that depends on another Bit component to work as an external dependency and we bypassed the problem of global css variables accessibility on our isolated environment components.