This is a step by step guide of configuring or setting up SASS SCSS for Remix.run

Setup Sass SCSS for Remix.run

Using SASS/SCSS with Remix.run

Step 1: Install SASS

In your remix project directory/folder, execute the following command:

npm install sass --save-dev

Step 2: Project folders structure

app/styles/sass/main.scss --> all styles, imports, etc
app/styles/css/    --> in this direcotry, main.css will be auto created after running the script

Step 3: In your Remix app package.json file, change scripts section as folling:

"scripts": {
    "build": "npm run sass-prod && remix build",
    "sass-dev": "sass --watch --update --style=expanded app/styles/sass:app/styles/css",
    "sass-prod": "sass --no-source-map --style=compressed app/styles/sass:app/styles/css",
    "dev": "concurrently \"npm run sass-dev\" \"remix dev\"",
   
    "postinstall": "remix setup node",
    "start": "remix-serve build"
}


Step 4: In your root.tsx/jsx, add the following code 

//importing the generated main.css file
import styles from "./styles/css/main.css";

export let links: LinksFunction = () => {
  return [
      { rel: "stylesheet", href: styles }
  ];
};


Step 5: test what you've configured:

For Dev run:

npm run dev 

For Production run:

npm run build

Congratulations! you've successfully setup SASS with your Remix App.

:)