The good news is that it's basically no more complicated to introduce SASS to CSS Modules in Create React App. In fact, the steps are borderline identical! So, if we want to start mixing the two, all we need to do is rename some files and change how our imports are handled. Let's see this in action:

1. First, head back to our src/Todo/Todo.module.css file and make a very minor modification. Specifically, let's rename it src/Todo/Todo.module.scss. Next, we need to change our import statement in src/Todo/Todo.js, otherwise the whole thing will fall apart:

import styles from "./Todo.module.scss";

2. Now, we should have our SASS working for CSS Modules with the Todo component, so let's start taking advantage of it. Again, we'll need to import our shared file into this SASS file as well. Note the following back in src/Todo/Todo.module.scss:

@import '../shared';

3. Next, we'll need to start changing the references to our various background colors. We'll change the background for regular Todos to $todo-normal. Then, we'll change the finished Todo background to $todo-complete. Finally, we'll want to change the critical items to $todo-critical:

.todo {
  border: 2px solid black;
  text-align: center;
  background: $todo-normal;
  color: #333;
  margin: 20px;
  padding: 20px;
}

.done {
  background: $todo-complete;
}

.hr {
  border: 2px solid red;
}

.critical {
  composes: todo;
  background: $todo-critical;
}

4. Save and reload our project, and let's make sure the new color scheme is being respected:

Honestly, everything beyond this point is just diving deeper and deeper into SASS-specific syntax, and again, that falls pretty far outside of the scope of this book. As you can see from the preceding screenshot though, we were able to introduce SASS into our CSS Modules code with no real complications.

Even better, we've now introduced a new way to change themes and skins in our project without a ton of extra work, and if our designers ever want to run in and change, for example, the backgrounds of all of the Todos and change the general color scheme, they can do so by running into the shared.scss file quickly and making a few color changes, and not having to change much else!

We can keep the lovely code modularity and developer-centric features of CSS Modules and SASS, but also provide nice inlets into our code to allow designers and other non-developers to modify the design and style elements where necessary! Even better, our code gets easier to maintain with the addition of two new features instead of making our project exponentially more complicated!