Setting Up SASS With Remix Run

Remix is the newest JavaScript framework in the developer community right now. It is a full-stack web framework that focuses on core web fundamentals to deliver a blazing-fast user experience. We will discuss how we can use SASS with Remix.

How does styling work in Remix?

Remix uses the good old way of adding a simple <link rel="stylesheet"> tag to the webpage for styling. If a route is active then stylesheet is added to the page. When a route is inactive then the stylesheet is removed. It is simple, effective, and helps in avoiding styling clashes.

Now, for stylesheets, or any link, to show up on the page, we need to let Remix know about them. We can do so by exporting a links function that should return an array. Each entry in the array corresponds to a link tag in the head of the document.

// login.js
import loginStyles from "~/styles/login.css";

export function links() {
  return [
    {
      rel: "stylesheet",
      href: loginStyles
    }
  ]
}
...

Can we provide our SASS files as links?

The href for a stylesheet should link to a plain CSS file because that is what browsers understand! We can link our SASS files as long as we provide the generated plain CSS. Importing SASS file directly into a component or route simply won't work.

How to make it work?

Let us say we want to style our Login page and we have our styling stored in the login.scss file.

We need to find a way to compile our SASS files and provide the generated css for Remix to process. In a normal webpack setup, we can simply use loaders like sass-loader, plugins like MiniCssExtractPlugin, and call it a day! The webpack will know how to process the asset and take care of everything.

With Remix, we need to manually process the sass files. We need a simple package to make it work.

• node-sass provides binding Node.js to LibSass (The C version of Sass).

Setting up

1. Create a new remix app

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

Now, our directory structure would look like the following

my-remix-app
├── app
│   └── routes
│   └── styles

The styles folder will contain all the .css files.

2. Create & add stylesheets to a styles/ folder next to app/

mkdir styles
cd styles
touch login.scss

my-remix-app
├── app
│   └── routes
│   └── styles
├── styles
│   └── login.scss

3. Install the package

npm i node-sass

4. Add scripts to package.json that will process the files in styles/ and write them to /app/styles/ where Remix modules can import them.

{
  "scripts": {
    "build:css": "node-sass ./styles -o ./app/styles --output-style compressed",
    "dev:css": "npm run build:css && node-sass -rw ./styles -o ./app/styles"
  }
}

5. Use it! During development, open a terminal tab and run the watch script

npm run dev:css

This will initially build all your scss files and then recursively watch all directories & files.

When building for production, run

npm run build:css

Now, styling in our styles/login.scss

.wrapper {
  background-color: red;
  display: flex;

  button {
    color: white;
  }
}

will be compiled to app/styles/login.css

.wrapper {
  background-color: red;
  display: flex;
}

.wrapper button {
  color: white;
}

Remix modules can import it as any other css file!

Points to remember

1. If you create a new scss file then you have to restart the watch process.
2. You can run these processes together with something like concurrently.

If you want to learn more useful and real-world Frontend related content then check out our YouTube channel below.