Live Reload & Asset Processing (SASS, images, etc.)

[nachtfunke]

Hello!

I've setup Sass as a preprocessor, which works fine but I cannot figure out how to tell remix to watch for changes in its generated files. Currently I am writing the generated CSS files to /public and I am linking it via links() in the root.tsx.

Not only can I not figure out how to let remix inject changes (like browsersync does it for example, though I'd be okay with a full reload too if it can't be helped otherwise), but even if I reload the browser window manually, it will not pick up the updated file and instead take a cached version of it.

In fact, I cannot reliably determine at all how to make sure it always uses the latest version of any asset that lives in /public. I'm running it on remix dev. The watch tasks work, remix reloads if I change something in the react code, the sass rebuilds when change something there - it just doesn't work together.

(Because I know it's gonna happen, please don't tell me to use a utility css framework or a css-in-js framework. I really wanna get this working. If this just doesn't work by design, I am fine with it too - I just wanna know)

[eXaminator]

I think the answer is, based on what I did with Tailwind, to point the output of SASS to your app directory, like app/style.css (and ignore that output file in git). Then import the style.css in your root file and pass that to links. Here is how I did it:

import styles from './tailwind.css';

export function links(): HtmlLinkDescriptor[] {
    return [
        { rel: 'stylesheet', href: styles },
    ];
}

I think that should allow remix to process the file itself and copy it to your public directory on build. I also think it's the import that allows remix to actually include the file in its watch, so just having a string in the links wouldn't be enough.