Starting a new Rails 7 application with Bootstrap CSS and JS bundling, along with CSS bundling, has resulted in the following structure:
app/assets/builds,
app/images/foo.jpg,
app/assets/stylesheets/application.bootstrap.scss
I have utilized Yarn to add Bootstrap to package.json, ESBuild for JS build, and Sass for CSS build.
Everything functions properly until I attempt to add a simple CSS class to the application.bootstrap.scss file:
.bg {
background-image: url("foo.com");
}
What I actually desire is for the asset in app/assets/images/foo.jpg to be referenced correctly. Since it is a scss file, using sass commands like:
background-image: image-url("foo.com");
or
background-image: url(image-path("foo.com"));
do not seem to work in development or production, resulting in errors related to syntax issues. This indicates that the sass compile is not generating a valid css build.
What should I do to ensure a simple class with an image asset is included in my delivered application.css bundle? Do I need to create a separate css file and include it in the sprockets manifest, or is there a simpler solution?
The only workaround that worked for me was adding an inline style to my ERB layout, which is less than ideal but allowed me to proceed for the time being.
Additionally, I would like to reference an image added to the Rails App so that is accessible. If I decide to use /app/assets/images/my-image.jpg instead of /public/my-image.png, what would the correct link be? Would it be fingerprinted and therefore inaccessible, or am I mistaken? Is there any benefit to referencing an asset as opposed to storing it in /public, or am I obligated to use /public?