Edits in imported CSS files are not being deployed

[marianneciara]

Hi there,

The site: ultrafinelabs.netlify.app.

The set-up:

• Site is set up to auto deploy when changes are pushed to master.
• Very simple set-up with vanilla CSS. Individual component stylesheets are pulled in via @import in the main.css stylesheet (screenshot of main.css file).
• Some asset optimization settings in post processing are enabled, see screenshot.

The problem:

• It appears that when I make an edit in an imported CSS file, the change doesn’t get deployed. However, when I make a change to the main.css file itself (even just reordering the imports), any edits do get deployed.
• For example, around 35 mins ago I pushed a small CSS property change on a contact form (border-radius on a form input, screenshot) and it has still not been deployed.
• Here’s a screenshot of that most recent deploy log and here’s a gist of the deploy log itself.

[Jady11]

I am having the same issue. I updated a link in the code and it doesn’t update on Netlify deployment. I did a test and changed some vanilla CSS and the same thing. The deployment logs even say they were updated, but I get nothing on the page.

[hrishikesh]

Would any of you be able to share your repo so we can check? The images are good for explaining the post, but we can’t debug using those.

[AaronP]

Have you tried disabling Asset Optimisation for CSS and then changing an imported file? I wonder if that’s having an effect.

[marianneciara]

Hi all, thanks for looking into this.

I’ve created a simple repo where I’ve been able to reproduce the error:

• Netlify site: https://elastic-northcutt-706d49.netlify.app/
• Repo: https://github.com/marianneciara/netlify-css-test

Testing steps:

• Created same set-up as other repo with imported CSS in the main.css stylesheet
• Initially disabled all asset optimization settings, then enabled them one by one, then all at once: changes in the imported CSS files were being deployed correctly at every stage
• Added the same Netlify form as on the other site (screenshot of mark-up): suddenly CSS changes in the import files were no longer being deployed
• I remove the form: further CSS changes in import files still not being deployed
• I disable the asset optimization settings: CSS changes in import files are now being deployed
• I enable the asset optimization settings again: now visible CSS is from multiple commits ago when I enabled all optimization settings (commit: 1e4d826e0c97fcaee0f429b79126150499aedaeb).

I don’t know if the form is a red herring, I just know I haven’t been able to get back to the stage before I added it where imported CSS file changes were being deployed and all asset optimization settings were enabled.

[luke]

Hi, @marianneciara. I’m seeing the change deployed.

This is the deploy I tested (if I should test a different deploy, please let us know which deploy to test):

https://app.netlify.com/sites/elastic-northcutt-706d49/deploys/604b600b03d0b2000747b593

It shows there that the commit SHA is: fb933553065a43e8e977bdafb925e4aafaea96fa.

We can confirm the content of that files for that SHA with this:

$ curl https://raw.githubusercontent.com/marianneciara/netlify-css-test/fb933553065a43e8e977bdafb925e4aafaea96fa/public/styles/components/_test-component.css
.test-component {
  max-width: 48rem;
  margin: 0 auto;
}

.test-component__title {
  color: sienna;
  font-weight: 600;
}

If we check the content for the deploy, we see the same:

$ curl https://604b600b03d0b2000747b593--elastic-northcutt-706d49.netlify.app/styles/components/_test-component.css
.test-component {
  max-width: 48rem;
  margin: 0 auto;
}

.test-component__title {
  color: sienna;
  font-weight: 600;
}

Even the SHA checksum of the two files match:

$ curl -s https://604b600b03d0b2000747b593--elastic-northcutt-706d49.netlify.app/styles/components/_test-component.css | sha256sum
43289fc07f7d60884545785b8a5df220dcca5d6f3671b157c60a652a317af5e1  -
$ curl -s https://raw.githubusercontent.com/marianneciara/netlify-css-test/fb933553065a43e8e977bdafb925e4aafaea96fa/public/styles/components/_test-component.css  | sha256sum
43289fc07f7d60884545785b8a5df220dcca5d6f3671b157c60a652a317af5e1  -

To summarize, your update is definitely being published. If there is a deploy where the change is not published, please let us know the deploy id where the change didn’t publish and we will be happy to take another look.

[Jady11]

Luke, I seem to still be having this same problem. I have updated an href link and it doesn’t display deploy on the Netlify page but is just fine when i run it locally. I did a test and changed some CSS on the home page and I get the same results. On my Netlify account page, it displays the changes were made, but that’s it.

[luke]

Hi, @Jady11. We would be happy to take a look to see what is happening. However, in order to troubleshoot, I’d need to know the commit SHA for the change and the repo itself would need to be public (or, at the very least, I would need access to the repo in some way).

Is the repo public? If so, what is the commit id that didn’t update on the deployed site at Netlify and what is the URL for the repo? If it is a private repo and you are willing to grant me access to it my GitHub username is overlordofmu.

[Jady11]

Luke, Thanks fo the reply. Here is the repo:

GitHub - Jady11/portfolio-reactHW

The commits that don’t seem to be connecting are:

df28134cf29d888a8fe93421551a23514a37fdcc
25e99acfb7f5d75b34faf44c4158b44d312a48b6
1899146b791d21f1450306bd6562c36c397f9d1a

I hope that helps. and thank you for your help.

[luke]

Hi, @Jady11. I actually do see the changes when I check.

I do show this deploy:

https://app.netlify.com/sites/jadyportfolio/deploys/604a93ef0c0d9700085549d7

Matches this commit reference:

https://github.com/Jady11/portfolio-reactHW/commit/df28134cf29d888a8fe93421551a23514a37fdcc

All the changes in that commit I do see on the deployed site:

https://jadyportfolio.netlify.app/

If you are not seeing those changes, what are the x-nf-request-id HTTP response headers for the incorrect assets?

There more information about this header here:

[Support Guide] Netlify Support asked for the 'x-nf-request-id' header? What is it and how do I find it?

Last reviewed by Netlify Support staff August 2023 What is the x-nf-request-id header? Web servers and web browsers communicate using a protocol called HTTP - which stands for “HyperText Transfer Protocol”. Both web browsers and web servers use a feature called headers as part of this protocol. The headers that web browsers send are called “request headers” because the browser in making an “HTTP request”. The web servers headers are called “response headers” because web servers send an “HTTP …

If that header isn’t available for any reason, please send the information it replaces (or as many of these details as possible). Those details are:

• the complete URL requested
• the IP address for the system making the request
• the IP address for the CDN node that responded
• the day and time of the request (with the timezone the time is in)

It would also help to know what causes you to determine the asset served is incorrect. For example:

• “It should say ‘Hello…I’m Jady’ but instead it says ‘Jady Tippetts’.”

or:

• “It should have social URL X but it shows social URL Y.”

[Jady11]

Luke,

Thank you for looking into this. What you are seeing is the original deployment of the profile. I have made changes since then but I am not seeing the changes. For example, if you are seeing the name change on the home page, then it isn’t workin g for you either. Locally it says my full name, i did that as a test to see if it was just the links i changed. the Netlify deployment says the opposite. I want what it does locally so i can make future changes.

You asked about the x-nf-request-id. I am not sure what that is.

[hillary]

Hey there, @Jady11 Luke posted a link to a Support Guide about what an x-nf-request-id is, and how to find it. Please start by reading this! I have linked it again here.

Thank you!

[Jady11]

Luke,

I am still having the same issue that we discussed before. It’s showing the old cache files. I have tried resetting the cache and redeploying but still ge the old build. Here is the number you requested:

x-nf-request-id:

817f22b2-02cb-4dab-bd23-c31e423e0c8b

I hope this helps. Lease let me know what you find out.

Thank you,
Jady Tippetts

[luke]

Hi, @Jady11. The time the request with x-nf-request-id: 609eabb78112150c2cfc4f4e was made was 2021-05-14 17:12:00 UTC. At the time, the deploy which was publish was this deploy:

https://app.netlify.com/sites/jadyportfolio/deploys/609eabb78112150c2cfc4f4e

The deploy above was made at 2021-05-14 16:56:23, about fifteen and a half minutes before the HTTP request was made.

If you clone that repo and check out that commit, you can see the status of the page at that time:

$ git clone https://github.com/Jady11/portfolio-reactHW
Cloning into 'portfolio-reactHW'...
remote: Enumerating objects: 294, done.
remote: Counting objects: 100% (147/147), done.
remote: Compressing objects: 100% (102/102), done.
remote: Total 294 (delta 81), reused 100 (delta 44), pack-reused 147
Receiving objects: 100% (294/294), 12.56 MiB | 28.70 MiB/s, done.
Resolving deltas: 100% (121/121), done.
$ cd portfolio-reactHW/
$ git log -n 3
commit 8e08267eae32ee4d12675cd14f60190ed39f7010 (HEAD -> master, origin/master, origin/HEAD)
Author: Jady Tippetts <jady11@gmail.com>
Date:   Fri May 14 10:51:41 2021 -0600

    added contact tab in navbar

commit 6f494851b0597f3ee4e1d5dd6927b1f6c02a21ec
Author: Jady Tippetts <jady11@gmail.com>
Date:   Fri May 14 10:40:27 2021 -0600

    testing homepage

commit 011c05be884e1c583e66af61d40202244d0785ae
Author: Jady Tippetts <jady11@gmail.com>
Date:   Mon Apr 12 17:05:13 2021 -0600

    changes to homepage

Based on the logs above, I can see the status of the repo at this time was the commit 8e08267eae32ee4d12675cd14f60190ed39f7010 made at 2021-05-14 16:51:41 UTC. This is the most recent commit before the deploy was triggered.

If I check out that commit, I can checksum the index.html file of that exact version like so (which isn’t actually needed as I write this because this commit id is the most recent commit currently but the example below will still work if more changes are made to the repo after I write this):

$ git checkout 8e08267eae32ee4d12675cd14f60190ed39f7010
Note: switching to '8e08267eae32ee4d12675cd14f60190ed39f7010'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by switching back to a branch.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -c with the switch command. Example:

  git switch -c <new-branch-name>

Or undo this operation with:

  git switch -

Turn off this advice by setting config variable advice.detachedHead to false

HEAD is now at 8e08267 added contact tab in navbar
$ md5sum public/build/index.html
c0166c8acae63edefd58463ace685a3c  public/build/index.html

That gives us a fingerprint for that file at the exact state of the repo when the deploy was triggered.

Now, we can request that exact deploy’s version of index.html and checksum it as well with this:

$ curl -s https://609eabb78112150c2cfc4f4e--jadyportfolio.netlify.app/ | md5sum
c0166c8acae63edefd58463ace685a3c  -

Based on this, I can see the two checksum are identical:

• c0166c8acae63edefd58463ace685a3c public/build/index.html
• c0166c8acae63edefd58463ace685a3c -

The two files are identical. Why do you believe this file is cached incorrectly?

[Jady11]

Luke,

Thank you for getting back to me.

The deploy that you sent me is incorrect form the version I have when I run locally. I don’t understand what I am doing wrong to have the same page displaying two different things.

Jady

[luke]

Hi, @Jady11. Then the issue isn’t at Netlify.

If your Git repository doesn’t match what you have locally then there is a disconnect between your local Git repo and the upstream repo. This isn’t something Netlify can see or control. We can only see the upstream repo (“upstream repo” meaning the repository as it exists at the Git host - in this case at GitHub).

The Netlify site is connected to the GitHub repo. That repo, the version at GitHub, is the “official” version as far as Netlify is concerned.

Why? Because GitHub is the only repo we can see. We don’t have access to your local system’s repo.

It would seem to me that what really needs troubleshooting is this:

• Why are the local changes not reflected in the upstream repository at GitHub?

Once the issue of the local changes not appearing at GitHub is fixed, then the issues with the changes not appearing at Netlify will be fixed. Netlify is relying on the GitHub repo. If you get the changes to appear there, then they will appear at Netlify (the next time you deploy - it won’t fix past deploys).

Are you making the changes in the same branch that the Netlify site is using? Are the files in questions being added to commits and are those commits being pushed to the upstream repo?

[Jady11]

Luke.

I must have made a mistake in my explanation. I see the changes locally that I make and push through to GitHub. Everything works great there. After I have pushed, netlify does not show those changes. It will show a commit message though, but the page stays the same.

Jady.

[Jady11]

Luke,

I am getting back with a little more detail on this issue. I have added a screenshot of the local page. The screen shot is the results when I run locally, which is what I need. The change in the name and contact tab in the navBar is what I am trying to do.

I still don’t know if this is a Netlify issue, but I don’t know how to fix it when I see changes on the local level.

Thank you for your patience with this.

Jady.

[perry]

hey Jady,

this is a screenshot i just took from your github pages:

as you can see, there is no menu entry for “contact”.

Looking at some of the JS in your project, there may be some mistakes in how you are trying to define that menu entry:

if you look at the files you have available in your directory:

and compare that with how your links are formed:

you can see that it is likely a problem that you do not have a contact.js like you have an about.js and so on.

I don’t know react very well, but i can almost guarantee this is the source of at least one of your problems.

why does it show up locally but not on netlify? that i don’t know, do you have a local contact.js that you have not added or pushed to the repo?