What best way to load CSS separately from JS with skip_style_tags: true for vite_javascript_tag

[maxkopych]

I have vue application with Single-File Components where main.js is entry point and contains and js and css. And I want to load styles separately from JS

I have something like this:

// head
// Doing check because in development it still keep all CSS in JS. Otherwise it show 404 error because in vite dev mode main.css doesn't exist until it's build
<% if ENV["NODE_ENV"] == "production" %>
  <%= vite_stylesheet_tag "main.css", media: "print", onload: "this.media='all'" %>
<% end %>

//body
<%= vite_javascript_tag "main.js", skip_style_tags: true, defer: true %>

It's woks fine but not sure if that is correct way.