How to use global mixins and variables with CSS Modules in React with SASS
Tags: sass, react
Published: 2021-11-07 22:50:21

---
title: How to use global mixins and variables with CSS Modules in React with SASS
published: true
date: 2021-11-07 22:43:56 UTC
tags: sass,react
canonical_url: https://relatablecode.com/how-to-use-global-mixins-and-variables-with-css-modules-in-react-with-sass/
---

![Feature](https://cdn-images-1.medium.com/max/1024/0*CLVmO6M3z9oEActJ.jpg)

These days it’s fairly common to use different CSS frameworks or libraries to handle styling in a React app such as Tailwind or styled-components. Typically I tend to prefer more traditional CSS with separated files. Outside of the arguments of why this may be preferred or not it’s still fairly useful to have a set of global mixins (SASS) and/or variables to keep it DRY.

Starting an app with Create-React-App or next a fairly common option is to use [CSS Modules](https://github.com/css-modules/css-modules) which guarantees that the styles per component will not have any conflicts, however, it does mean it’s slightly different to access these global variables.

This tutorial assumes you already have a react app ready to configure.

### The package

Create-react-app docs recommend using [node-sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/) for the styling, however, this is deprecated so I would suggest using sass (Dart Sass) as it is still actively receiving support. This can be quickly done with:

```
yarn add sass
```

or

```
npm install sass
```

### The stylesheet

Now with that out of the way let’s create a file for our mixins with the name \_variables.scss:

![mixin stylesheet](https://cdn-images-1.medium.com/max/294/0*Oq8bIknvVIxg3If_)

In the actual style sheet, it can be imported in the following way (any file \*.module.scss):

![imported mixins](https://cdn-images-1.medium.com/max/402/0*7976deRCaZmA59lT)

### Variables

For variables it would be something very similar, let’s have a file with the name \_variables.scss:

![variable stylsheet](https://cdn-images-1.medium.com/max/317/0*lMwDfraoNrsceiCj)

And importing it can be done in a similar fashion:

![importing variables](https://cdn-images-1.medium.com/max/340/0*j8qfr1r4zEz_MRk9)

This can be quite useful to reuse a lot of variables and similar styles throughout the entire project while still maintaining the module structure.

For example, I did something along these lines to share variables to use in media queries throughout my project:

![example stylesheet](https://cdn-images-1.medium.com/max/542/0*-vVRStBBukHBX6fH)

This is quite useful as I used a combination of CSS variables and SASS variables to reuse a lot of fixed sizes and paddings to keep everything standardized throughout the entire app.

And that’s it! If you have any questions let me know in the comments below.

{% youtube https://www.youtube.com/watch?v=95YeRlToAl0 %}

If you liked this feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/diego-ballesteros-9468a7136/) or [Twitter](https://twitter.com/relatablecoder)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/how-to-use-global-mixins-and-variables-with-css-modules-in-react-with-sass/) _on November 7, 2021._