Css changes are not being applied in rails app

Question

I am working on rails app and now I am having trouble.

Early when I use to change my frontend styling and apply changes in css then they quickly show up on reload in brower.

But in present, don't know but something went wrong. Whenever I change css and save it then onload, things remain same. After debugging, I found that app is picking styling files from precompiled assets pipeline. So for the solution, I have to recompile the assets then 2 new files are generated against wach file changed. And there will be 4 files in total against a single css file in which changes are made. So now I have to delete old ones and then have to restart the serve and refreshing the browser will show all the changing and that is weird as I have to do it all the time for every single change. I can't figure as I am new to rails. Help....

Answer 1

Please clear the tmp cache first and then run the server

$ rake tmp:cache:clear && rails server

Answer 2

If you are developing the app, you should delete public/assets directory. Then restart the app. Don't run asssts:precompile task. Your most recent changes of assets will be up to date without restart the app.

Answer 3

I had the same issue and found a solution : run rake assets:clobber, it will remove the precompiled css and js. Then run yarn build --watch to build back the css and js file.

Dont run the assets:build as the same issue will revert.

Answer 4

Rails 7 comes with dart-sass by default. When the project is started with ./bin/dev, it starts the script "build:css" from package.json:

# My "build:css" script in package.json is:
sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules

According to the sass cli documentation, there is an option --load-path

This option (abbreviated -I) adds an additional load path for Sass to look for stylesheets. It can be passed multiple times to provide multiple load paths.

So in my case, I added --load-path=./app/components to the sass command in my package.json file (because I have custom scss files in my ./app/components directory).

# My package.json scripts after adding the '--load-path=./app/components' option:
...
  "scripts": {
    "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 --load-path=./app/components"
  }
...

Answer 5

This might actually be a browser issue, where the browser is caching the previous CSS and not reloading your new CSS changes.

Instead of reloading the page with CTRL+R, try reloading the page with CTRL+SHIFT+R

This will force a reload of the web page and clear the page cache, which forces all the assets to reload and fixed the problem for me.

No need to run css:clobber, assets:precompile, or anything like that! Just change the way you reload your browser :)

Answer 6

So I have find out the reason and it was because I have run the command of assets precompile which I shouldn't have to run as rails was doing it already for me may be due to configuration of my project or may it is its default behavior.

To solve this problem I have to delete my projects folder from my system and clone it again and things got normal again.

And now I never ever going to run assets precompile command again