How to import multiple css or sass files with sourcemaps?

[inspire22]

I'm migrating from sprockets, skipped esbuild so my apologies if there's something I'm not getting.

I've gotten my site working by importing the css from the application.js, like import '../stylesheets/cats.css'. I do see a flash of unstyled site though before the CSS are loaded (at least in development, haven't tested production)

Chrome devtools also shows the css as inline to the page, so I can't see what file the style comes from when debugging.

I also had a version working where I used sass to @import each file.
But then chrome devtools shows the 'source' as the big application.sass base file, rather than the original file.

Thanks for a great project :)

[ElMassimo]

Hi Kevin!

FOUC in development is expected if you are importing styles from JS, as the browser won't block rendering waiting for the scripts to load (module scripts are always async). It won't happen in production though, so don't worry.

If you'd like to avoid FOUC in development, you can use vite_stylesheet_tag (the browser does block waiting for CSS).

---

Vite's support for CSS sourcemaps in development is experimental, and can be enabled in vite.config.ts:

export default defineConfig({ 
  css: { devSourcemap: true },
})

[inspire22]

That worked great, thanks so much!

I'd love to check what production css/js looks like before actually launching it, is there a way to make the vite_rails render the production links from "vite_javascript_tag 'application'" temporarily?

In the vite_stylesheet_tag entrypoint CSS file, is there any way to include other stylesheets in a css file, or do you have to use sass for that? Like sprockets used //require_tree

[ElMassimo]

If you don't start the Vite dev server, by default Vite Ruby will autoBuild assets in development mode, which in practice is very close how it's built in "production" mode.

So starting only rails s and visiting your app is a good way to test it.

---

You can use .scss entrypoints if you want, but Vite should process @imports in .css files as well.

[inspire22]

Thanks! "rails s" seems to remove sourcemaps unfortunately, but does help me feel more confident to launch in production.