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:
- Added new file
stylesheets/custom.css
, with css:
.my-class {
color: #fff;
background-color: #00eb00;
}
Add import to application.bootstrap.scss
@import "custom";
yarn run build:css
And now I can see
.my-class
inbuilds/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?
Prefer running the app using foreman, with command
$ bin/dev
this way it automatically compiles the scss files.