Adding Sass to Remix

Adding Sass to Remix

Sass is an incredibly popular CSS preprocessor that adds quality of life improvements such as nested rules, mixins, and so on. Personally, it has always been my go-to in my projects - so learning how to add Sass to Remix was super important for me!

The overall process of adding Sass to Remix is using the Sass npm package to compile your .scss files into .css files. We will then tell Remix to use the .css files as the CSS source for our project.

Remix isn't opinionated about integrating 3rd party tools like Tailwind or Sass into your project. The recommendation is to run the separate Tailwind or Sass compilers in parallel with the Remix tooling.

For this guide, I'm assuming you already have a Remix project set up. If you don't, check out Remix's excellent Getting Started guide or use the following lines of code to create your Remix app.

bash
npx create-remix@latest
# choose Remix App Server
cd [whatever you named the project]
npm run dev

Next up, we'll be adding the sass npm package. In your Remix project, pop open a terminal and run this command:

bash
npm install sass

This will install Sass into your project and therefore allow you to use the Sass CLI, which we'll get to shortly!

Because we'll be creating vanilla CSS files through Sass, we want to store our .scss files separately from the rest of our app. This allows us to use Sass without changing the CSS imports in our project at all (which is convenient when we've just started a project, and massively time-saving if we're converting an existing Remix project to SCSS).

Create a styles/ folder at the root level of your project (outside of app/). You can do this in whatever way you like, but here's a quick terminal command for it:

bash
mkdir styles/

Your project directory should now look like this:

Remix Directory Structure

Almost there! All you have to do for this step is:

  • Drag all your CSS files (that are likely living in app/styles and its sub-folders) into the newly-created styles/ folder
  • Rename them to be .scss instead of .css.

Remix does not include built-in support for compiling or interpreting Sass, and doesn't seem to plan to, so it's up to us to run the Sass compiler ourselves alongside our dev process (or in parallel, which we'll get to later!).

In package.json, add this line to your scripts:

json
"scripts": {
    ...
    "sass": "sass --watch --no-source-map styles:app/styles",
    ...
},

Let's break it down into its parts so we can better understand what's happening:

  • --watch: This is simply telling the Sass compiler to continue watching the files/folder we give it and to re-run the compiler when it notices changes (essentially, this is just hot reload for Sass)
  • --no-source-map: This is personal preference, so feel free to leave this out - this tells the Sass compiler to not generate source maps for the CSS (i.e. global.map.css)
  • styles:app/styles: Here, we're telling the compiler to take SCSS files it finds in styles/ and send them to app/styles
😄Tip
The Sass compiler retains folder structure. So if you have `.scss` files in sub-folders, i.e. `styles/header/myHeader.scss`, this will output `app/styles/header/myHeader.css`

Now pop open your terminal and run this command:

bash
npm run sass

You'll see some output like this:

bash
...
> sass --watch --no-source-map styles:app/styles

Compiled styles/dark.scss to app/styles/dark.css.
Compiled styles/demos/about.scss to app/styles/demos/about.css.
Compiled styles/global.scss to app/styles/global.css.
Sass is watching for changes. Press Ctrl-C to stop.

You've done it! Sass has compiled your .scss files into .css files that all the imports in Remix will work perfectly with. You can see this for yourself if you open the app/styles/ folder.

When you want to edit your CSS, just make sure to do it in the .scss files. On save, the generated CSS files will update thanks to --watch!

Keep in mind that you'll have to have npm run sass running in a separate terminal tab (or window) from your npm run dev command for Remix. Since they are two separate processes, they have to be running at the same time - otherwise your CSS (or app) won't update. This setup will work perfectly fine, but there is a small change we can make to make our lives easier!

We need to run this Sass script in addition to running our Remix application. We will use a tool called concurrently to run multiple processes in our Remix app. Pop open your terminal and run this command:

bash
npm install concurrently

concurrently is an npm package that allows you to run two commands in parallel. Let's go into our package.json one more time and update the dev script so we can run sass and Remix in parallel.

json
"scripts": {
    ...
    "dev": "concurrently \"npm run sass\" \"remix dev\"",
    ...
},

Note how we have to escape the quotes with the \ character.

Now you can simply do npm run dev and you'll have the Sass compiler and Remix itself running in the same terminal! This is shown in the output for this command:

> concurrently "npm run sass" "remix dev"

[0]
[0] > remix-app-template@ sass /Users/srob/Documents/code/sass-remix
[0] > sass --watch --no-source-map styles:app/styles
[0]
[1] Watching Remix app in development mode...
[0] Compiled styles/dark.scss to app/styles/dark.css.
[0] Compiled styles/demos/about.scss to app/styles/demos/about.css.
[0] Compiled styles/global.scss to app/styles/global.css.
[0] Sass is watching for changes. Press Ctrl-C to stop.
[0]
[1] 💿 Built in 393ms
[1] Remix App Server started at http://localhost:3000

If you make any updates to your .scss files, you'll see the output here - just like if you update any of your Remix app's files.

Now, go and enjoy your seamless developer experience with Sass in Remix!

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Samuel Robertson

Samuel Robertson

Samuel is a Senior Software Engineer at System1 by day, and a dev and aspiring content creator at Better Dev by night. Powered by coffee and preworkout.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)