1

This question has probably been asked a billion times, but I haven't found the exact same issue.

I'm working on a M2 (v2.2.1) shop. Recently I accidentally removed the .htaccess file from pub/static. I've put it back but since then, not all of my theme's CSS loads. Actually, I'm not even sure if that has caused the issue, or perhaps something else is messed up (too).

I'm using this script to deploy:

rm -Rf pub/static/*
rm -Rf var/view_preprocessed/*
rm -Rf var/cache/*
rm -Rf var/page_cache/*

php bin/magento maintenance:enable
php bin/magento setup:static-content:deploy -f en_US
php bin/magento setup:static-content:deploy -f nl_NL
php bin/magento cache:clean
php bin/magento maintenance:disable

I've tried switching to developer mode, back to production. I've deployed several times, with and without the explicit deletion of static files.

I've run the reindexer, flushed caches. Flushed Redis cache, I've ran the setup upgrade & di compile scripts. I've removed caches & css files from the magento backoffice. I've tried adjusting the app/etc/di.xml file to switch the developerMaterialization strategy from Symlink to Copy. And back.

All of the above in almost every thinkable order.

The CSS file (with correct css code IS included in the page source. The file exists, I can access it via browser or download it via wget from another server, however some of the CSS rules are not applied. When I copy such rules to my browser developer console the rules do take effect, so it's not a matter of a silly css typo or missing file.

I've reverted about a dozen of git commits trying to find any relevant changes, but so far: nothing.

Obviously I lack the knowledge of what is actually happening. At this stage I feel like I'm just making things worse.

Any thoughts?

  • In your browser network what response you are getting for the missing css files? – Raj Mohan R May 21 at 12:39
  • There are no missing css files. The CSS file with some specific rules that aren't applied is loaded, response 200 OK – dvdmierden May 21 at 12:44
  • Can you provide some of the missing CSS including file path/name please? – Ben Crook May 21 at 12:58
  • Are you saying the file is present but the code is not applied? – Raj Mohan R May 21 at 12:58
  • @BenCrook I was hoping for a more conceptual approach, but this is the specific file: holisanshop.hypernode.io/pub/static/frontend/Htia/Holisanshop/… Some CSS rules not applied: .checkout-index-index .authentication-wrapper { margin-left:9px; float:left !important; text-align:left !important; } .checkout-index-index .authentication-wrapper button { border-radius: 4px; border: 1px solid #81ae44; color:#81ae44; padding: 7px 15px; } The "inloggen" link at the checkout screen isn't styled as such. – dvdmierden May 21 at 13:03
1

There is nothing wrong with your deployment or how you are compiling the files, it's a CSS issue as the CSS you mention is wrapped in a media query.

If you shrink the browser you will see the CSS you mention apply:

enter image description here

If you search your CSS for @media only screen and (max-width: 479px) you will see your media query has no closing tag.

  • OMG Ben, you're a life saver. Can't remember the time I felt more incompetent than this. Cheers – dvdmierden May 21 at 13:40
  • You're welcome, it happens to the best of us! – Ben Crook May 21 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.