Custom CSS not working with CSS Bundling for Rails 7

Question

Playing around with Rails 7 and I don't understand why my custom CSS is not working.

I built new rails app with flag for Bootstrap, which is working fine (CSS and JS, tested with bootstrap modal). These are my default config files:

application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

application.bootstrap.scss

@import 'bootstrap/scss/bootstrap';

package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3",
    "esbuild": "^0.14.23",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "sass": "^1.49.9",
    "stimulus": "^3.0.1"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

And I can built CSS in /builds/application.css

---

Now I want to add custom CSS. This is my process:

1. Added new file stylesheets/custom.css, with css:

    .my-class {
      color: #fff;
      background-color: #00eb00;
    }

2. Add import to application.bootstrap.scss

   @import "custom";

3. yarn run build:css

4. And now I can see .my-class in builds/application.css

But when I try to use id in HTML, no CSS is added. Why? Should I place it somewhere else?

EDIT: I got it running, but only when I run manually rails assets:precompile and then bin/dev. Why do I need to precompile every time I change something?

Answer 1

In a fresh rails 7 app (with css=bootstrap), here's what I did to get custom css styles:

1. Uncomment gem 'sass-rails in Gemfile, then bundle install (more info on that here)
2. Create a new css file in app/assets/stylesheets and name it example.css.scss
3. Add this line to app/assets/config/manifest.js:

//= link example.css

4. Wherever you need access to those styles, include this tag

<%= stylesheet_link_tag "example", "data-turbo-track": "reload" %>

5. Start your server with bin/dev instead of rails server

6. Everything should work (a nice test is to include this in your example.css.scss file and H1s should turn green)

h1 {
  color: green;
}

Resource

• Very helpful video here

Answer 2

I just encountered this problem and noticed both JavaScript and CSS are not recompiled after changes. If you have gem jsbundling-rails included in your gemfile, check out https://github.com/rails/jsbundling-rails for more details and how-tos. Run yarn run build:css to recompile the CSS assets.

I prefer using ./bin/dev to start my local server and monitor both JavaScript and CSS updates.

Answer 3

1. Add new file stylesheets/custom.css and create new css class.
2. Add import to application.bootstrap.scss @import "custom";
3. then run yarn run build:css to recompile the CSS assets.
4. Now you can see custom-class in builds/application.css alongside with bootstrap css

Run the local server to ./bin/dev to automatically build the CSS and JavaScript updates.

Answer 4

It worked for me if I added

//= link custom.css

to app/assets/config/manifest.js

And I didn't add @import "custom"; to application.bootstrap.scss