css - Rails 6 not picking up stylesheet changes within development

Question

I'm running into a very strange issue, that I cannot explain anyhow.

So, I have an app with quite some styles applied to it. Checking it on localhost, it looks all fine. Now I want to change some styles within a stylesheet. Checking that change again in localhost, I find that it didn't get picked up.

Maybe it has to do with that I'm including an engine which I'm in the midst of developing but I think that should not be the case. To be more specific, it's a Rails 6 app and the CSS change that I want to make is within the parent application.

Here are my files:

application.haml

!!!
%html
  %head
    %title= [yield(:title), 'MyTitle'].reject(&:blank?).join(' – ')
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' # also tried without the turbolink part
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application' # have to include that as some JS from the engine is needed and all JS file no matter if from parent or engine work
...

app/assets/configmanifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css

# already tried 
//= link_tree ../images
//= link_directory ../stylesheets .sass

# and
//= link_tree ../images
//= link_directory ../stylesheets .scss

# and instead of the two liners above
# //= require_tree .
# //= require rails-ujs
# //= require activestorage

app/assets/stylesheets/application.sass (also tried it with .scss and .css)

@import "font-awesome-sprockets"
@import "font-awesome"

@import 'config/config'
@import 'components/components'
@import 'layouts/layouts'

Initially, I wanted to change something else but I ended up testing it with only one color, which didn't work either.

app/assets/stylesheets/config/_config.sass

@import 'fonts'
@import 'colors'
@import 'mixins'
@import 'utilities'
@import 'basic-styles'
@import 'flashes'

app/assets/stylesheets/config/_colors.sass

$color-gray-light: #F4F4F4
$color-gray: rgb(100, 100, 100)
$color-main: #96C11F // Wanna test changing that to rgb(100,100,100)
$color-sec: #F1932C
$color-text-light: rgb(125, 125, 125)
$color-bg: $color-gray-light

.color-main
  color: $color-main !important

.color-sec
  color: $color-sec !important

.color-gray
  color: $color-gray !important

.color-bg
  color: $color-bg !important

This color is e.g. used in

app/assets/stylesheets/config/_utilities.sass

...
// --- Fonts ---
h1, h2, h3
  color: $color-main // also tried putting rgb(100,100,100) directly here
  margin: 0
...

So, when I change the color, reload the localhost the h1 has still color: #96C11F assigned to it.

I tried hard refresh, deleting all browser data and rails assets:clean and restarting the server like 1 million times. Nothing changed anything...

question from:https://stackoverflow.com/questions/65860098/rails-6-not-picking-up-stylesheet-changes-within-development

Answer 1

Waitting for answers