Output location for styles from Vue components

[dombarnes]

I've currently got vite_rails setup with the @vitejs/plugin-vue to handle some vue SFCs (I just load the sfcs in a page-specific js file).
My main styles are all imported via app/javascript/entrypoints/application.scss and I have that in with a vite_stylesheet_tag 'application.scss'. However when the assets get precompiled, all the vue-related styles from components get exported into style.css.

Should I just add another vite_stylesheet_tag 'style' only for non-dev environments or is there another way to get them rolled into one CSS output file?

- app/assets/stylesheets/buttons.scss
- app/javascript/entrypoints/application.scss (imports buttons.scss)
- app/javascript/entrypoints/map/.scss (imports MyButton.vue)

[ElMassimo]

Hi Dom!

By default, vite_javascript_tag would include styles for any Vue components that are imported.

If you are using cssCodeSplit: false in your Vite config, please check this section in the docs.

If you'd like to have them rolled into one CSS file, you'd need to import the other stylesheets from your JS entrypoints, and skip the vite_stylesheet_tag calls whenever you include the script.