Propshaft - Serving static CSS files from libraries

Frontend libaries, such as Bootstrap, JQuery UI and Lightbox2 are often composed of not only JS, but also CSS files. Those files are usually already minified and can be served without any additional transpilation step. For performance reasons, it can be beneficial to host all assets on the same site (see HTTP2), because the browser only needs to establish a connection with a single site instead of multiple.

Static CSS files from libraries (as opposed to writing SASS → or your own CSS →) are usually placed in the folder vendor/assets/stylesheets. In most code editors and IDEs, this folder not very prominently placed and quite far down the list of files in a project, but is usually also not changed often.

To link the CSS files from your views, you can use the stylesheet_link_tag helper and pass the file name. To include the file vendor/assets/stylesheets/bootstrap-5.3.3.min.css:

<%= stylesheet_link_tag 'bootstrap-5.3.3.min.css', "data-turbo-track": "reload" %>

The files in the vendor folder must be included one by one. This is a bit of work, but once it's done, you usually don't need to change it often.