Rails 7 sprockets-rails, not regenerating application.css

Question

Edit: Is ./app/assets/builds/application.css a product of yarn? Because if it is then I need to rethink this question. I'm looking into it.

In upgrading from Rails 6 to 7 and going with

gem "jsbundling-rails" 
gem "sprockets-rails" 
gem "turbo-rails"

I'm having trouble with the css asset pipeline. ./app/assets/builds/application.css is not getting updated when I change ./app/assets/stylesheets/application.scss

I think I am having problems with leafletjs formatting and am trying to sort out the css for leaflet. The problem could be with bootstrap, but I don't think so.

I was trying to toggle different .scss files.

// app/assets/stylesheets/application.scss
@import 'leaflet'; // node_module 
// files in app/assets/stylesheets/
@import 'custom';
@import 'static_pages';
@import 'streets';
@import 'leaflet.timeline';
@import 'leaflet.OpacityControls'; 

Are the @import… redundant? In other words are they added automatically. That's how I understand it. If it's automatic then I would have to remove the .scss files to toggle?

package.json:

    {
      "license": "ISC",
      "main": "application.js",
      "dependencies": {
        "@babel/core": "^7.10.3",
        "@fortawesome/fontawesome-free": "^5.13.1",
        "@hotwired/stimulus": "^3.1.0",
        "@hotwired/turbo-rails": "^7.1.3",
        "@popperjs/core": "^2.11.6",
        "@rails/activestorage": "^7.0.3.1",
        "@rails/ujs": "^7.0.3.1",
        "bootstrap": "^4.5.0",
        "bootstrap-icons": "^1.9.1",
        "browserify": "^17.0.0",
        "core-js": "^3.6.5",
        "esbuild": "^0.15.7",
        "jquery": "^3.6.1",
        "jquery-ui": "^1.13.2",
        "leaflet": "^1.6.0",
        "leaflet-bing-layer": "^3.3.1",
        "leaflet-draw": "^1.0.4",
        "leaflet.control.opacity": "^1.6.0",
        "leaflet.timeline": "^1.4.3",
        "popper.js": "^1.16.1",
        "regenerator-runtime": "^0.13.5",
        "sass-loader": "^10.1.1",
        "turbolinks": "^5.2.0",
        "turf": "^3.0.14",
        "webpack": "^4.43.0"
      },
      "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "webpack-bundle-analyzer": "^3.8.0"
      },
      "scripts": {
        "webpack:analyze": "yarn webpack:build_json && yarn webpack:analyze_json",
        "webpack:build_json": "RAILS_ENV=${RAILS_ENV:-production} NODE_ENV=${NODE_ENV:-production} bin/webpack --profile --json > tmp/webpack-stats.json",
        "webpack:analyze_json": "webpack-bundle-analyzer tmp/webpack-stats.json public/packs",
        "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
        "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
      }
    }

Answer 1

Are the @import… redundant? In other words are they added automatically? No you explicitly need to add them.

Is ./app/assets/builds/application.css a product of yarn? It must be.

I sorted this out with a new Rails 7 app which then wouldn't have any baggage from previous versions of Rails.

So now I can continue with figuring out my leaflet css problems.