support scss

[nadiTime]

Hello everyone

I am using scss for my project,
I have this setup working pretty good

//.vscode/settings.json
{
  "files.exclude": {
    "**/*.css": true,
    "**/*.css.map": true
  }
}

//package.json
"scripts": {
    "build": "run-s build:*",
    "build:css": "sass app/:app/ --style=compressed --no-source-map",
    "build:remix": "remix build",
    "dev": "run-p dev:*",
    "dev:css": "sass --watch app/:app/",
    "dev:remix": "remix dev"
}

//remix,config.js
module.exports = {
  ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.scss", "**/*.css.map"]
};

then I can import the generated css file (in the same location as the .scss file):

import globalStylesUrl from "./styles/global.css";

only thing that is missing is the right map files for source files browser support, which is pretty annoying not being able to edit .scss files in the browser.

any idea how to achieve this?

[zcty0702]

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

The styles directory outside the app is generated into the styles directory inside the app

[nadiTime]

node-sass is deprecated, I am using dart-sass

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.