Not able to import the CSS file

[ram2104]

Hey,

This is the weird issue I'm facing while importing the stylesheet in root. tsx. CSS is failing to load due to the object.
Ideally, the generated module should have a path to the generated CSS module. Not sure why is it mapping to an empty object rather build a file location.

[kiliman]

Remix will not compile your SCSS files automatically. You'll need to use postcss to do compile to a css file and import that. This is similar to how you would run tailwind compiler to generate the css file.

import stylesHref from '~/app/styles/styles.css'
export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: stylesHref },
]

[ram2104]

It was an issue because I was using (override-esbuild-package) to override the ESbuild config for loading sass.

const { withEsbuildOverride } = require('remix-esbuild-override');
const { sassPlugin } = require('esbuild-sass-plugin');

But now I've switched to CSS-preprocessor.
Thanks, @kiliman.