Add information about how to load CSS dependencies

[martindemello]

It took me a good bit of googling and trial and error to discover that if I installed primer-css via npm, the way to get it into my rails app was by adding

import '@primer/css/dist/primer.css'

in app/frontend/entrypoints/application.js (rather than e.g. in application.css or via a stylesheet tag in my erb file)

An overview page on the various ways to install and include third-party css libraries into a vite/rails setup would have been very helpful.

[ElMassimo]

Hi Martin! @martindemello

Given how many CSS libraries are available on npm, it would be quite a large section (and might go out of date quickly).

Perhaps it would be better to suggest a change in the docs for primer-css, which already cover this?

---

For Primer, another option that should work is to import styles from your own .scss file:

@import '@primer/css/utilities/index.scss';

You can then use vite_stylesheet_tag 'application.scss' or import it in application.js.

[martindemello]

Hi Máximo,

I just meant document something generic, like

CSS files need to be loaded in `entrypoints/application.js`

If you are importing a css file from an npm package, import it via "import @package/path/to/file.css", e.g.
  import '@primer/css/dist/primer.css'

If you are importing a file from within your application, import it via "import '~/stylesheets/file.css"

Alternatively, if you are using scss, you can import them in your own .scss file
....

This stuff probably seems obvious if you've been doing web development, but it's all new to me, so I figured it would be useful to point out things I had no idea about and could also not find in the docs.

[ElMassimo]

CSS files need to be loaded in entrypoints/application.js

That's not the only way, you can also inject a stylesheet using vite_stylesheet_tag, and not deal with JS imports at all.

The example entrypoint added during installation has an example.

It might be nice to add a short section in Development (perhaps after Entrypoints), but would skip the primer stuff which is too specific.

[ElMassimo]

Added a Stylesheets section to the docs that mentions the two most common ways to inject styles in Vite Ruby, and should make it easier to find how to get started.

Thanks for the suggestion!

[martindemello]

thanks, that looks good!

would skip the primer stuff which is too specific.

I just used primer as an example, I meant the general process of loading a stylesheet from an npm module rather than from within app/ somewhere. I guess it's easy enough to figure out once you know that it needs to be done in application.js but I feel it's still worth having an explicit example of that.