I'm building a card game application using Rails as by backend and React as my frontend. I'm using Rails 6.1.7.2 and Webpack to implement React. So far I have a Board component and a Game component. The Board component I've nested inside the Game component. I've created two stylesheets, 'board.css' and 'game.css', inside 'app/assets/stylesheets' and imported them within their respective components.
The issue is that when I make changes to these stylesheets I want the changes to take effect asynchronously. However I can't seem to get that to happen.
So far I've tried the following:
- Doing hard refreshes using
Command+Shift+R - Clearing the browser cache
- Including
<%= stylesheet_link_tag 'board', media: 'all', 'data-turbolinks-track': 'reload', :cache => false %>in my layout file (application.html.erb) - Including
config.action_controller.perform_caching = falsein myconfig/environments/development.rbfile - Running
rake assets:precompilewithin the root of my project
Plus, when I use the browser inspector I've noticed something peculiar. Inspecting the HTML and looking at the Styles tab shows me this:
It shows that old styles that render in the browser pull from board.css (border: 3px solid orange) while the updated styles pull from board.source.css (border: 3px solid purple). I suspect this has something to do with the asset pipeline or how I have my stylesheets written or organized.
