Cannot see changes in Magento 2 js and css

Question

I am new to magento 2 and I am creating extension for it.

But I am unable to see any js and css changes.

When i check on my source code my js file custom.js and css file custom.css is loaded properly but i am unable to see any of my changes.

I tried to clear cache and didn't get any result.

I cleared cache from backed and manually as well and disabled all cache too.

Angel

Answer 1

step 1. delete all folders under pub/static/frontend

step 2. delete cache folder under var/cache

Now open your command prompt and go to your root installation of magento 2 and fire the following commands

step 3. php bin/magento setup:static-content:deploy

step 4. php bin/magento indexer:reindex

The above step worked for me. I hope it will work for you also.

Let me know if you still facing any problem.

Inordinate

reindex is useless. if you are in developer mode, just delete from pub/static/ old loaded files custom.js and custom.css, then reload the page. Magento will create new files in pub/static/ with your new changes. – Moony

Luca S is right. If you are in developer mode, you shouldn't be redeploying static content and reindexing. – Second

Thanks for sharing important stuff guys :) – Inordinate

Guys this is not accurate - the Magento mode does not affect indexer behavior. – Rothmuller

Answer 2

step 1.

rm -rf pub/static/frontend/*

step 2.

rm -rf var/cache/*

step 3.

php bin/magento s:s:d -f

step 4.

php bin/magento indexer:reindex

The above step worked for me. I hope it will work for you also.

No

Answer 3

To work efficient it is possible to use the following command to do all tasks together:

rm -rf var/view_preprocessed; rm -rf pub/static/frontend/*; rm -rf var/cache/*; php bin/magento setup:static-content:deploy -f de_DE;

Stickle

Answer 4

Even if Magento is in Dev mode, Nginx may set caching headers on Javascript and CSS files:

$ bin/magento deploy:mode:show
Current application mode: developer. (Note: Environment variables may override this value.)

See that Note? And sure enough:

$ curl -v 'https://foo.local/static/version51/adminhtml/Magento/backend/en_US/Dc_Foo/js/foo.js'
< HTTP/1.1 200 OK
< Server: nginx/1.21.6
< Date: Tue, 12 Jul 2022 12:00:07 GMT
< Content-Type: application/javascript; charset=utf-8
< Content-Length: 1082
< Last-Modified: Tue, 12 Jul 2022 05:57:18 GMT
< Connection: keep-alive
< ETag: "62cd0d3e-43a"
< Expires: Wed, 12 Jul 2023 12:00:07 GMT
< Cache-Control: max-age=31536000
< Cache-Control: public
< X-Frame-Options: SAMEORIGIN
< Accept-Ranges: bytes

Note the Expires header, set for one year in the future (answer written July 2022).

You can configure Nginx or Apache or any other server to not serve these headers, but my preferred method is to configure my browser to ignore caching when development tools are in use. In Chrome that can be accomplished by opening DevTools (F12), then clicking on the gear icon (⚙), then checking Preferences -> Network -> Disable cache while DevTools is open.

Housemaid

Answer 5

It may be because a core CSS rule has a priority over your css rule for the same DOM element. You should check it with a browser developer tools.

Miltiades

i tried with important as well but it didnot worked and what would be about javascript. – Angel

Answer 6

Require JS will cache the changes to your javascript files (even in developer mode). To disable caching, add the below to MyNamespace/MyModule/view/frontend/requirejs-config.js

var config = {
    urlArgs: "bust=" + (new Date()).getTime()
};

Amritsar

Cannot upvote this enough. Create a simple module, with the config above, enable module. All .js files now have cachebuster on their url, including those included via require. No infuriating issues with JS changes not appearing in browser. – Masqat