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.

score 3 · Answer 1 · edited Jan 16 '20 at 11:27

3

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.

edited Jan 16 '20 at 11:27

Miss Chanandler Bong

4,081
10
26
36

answered Jan 16 '20 at 10:14

Asad Ullah Riaz

31
3

score 2 · Accepted Answer · edited Feb 02 '16 at 10:53

2

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.

edited Feb 02 '16 at 10:53

Yatin Khullar

1,580
1
12
26

answered Feb 02 '16 at 06:40

samumaretiya

1,175
7
18

2

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. – LucScu Nov 15 '16 at 09:03
Luca S is right. If you are in developer mode, you shouldn't be redeploying static content and reindexing. – Nathan Merrill Feb 13 '17 at 21:12
Thanks for sharing important stuff guys :) – samumaretiya Feb 14 '17 at 05:54
Guys this is not accurate - the Magento mode does not affect indexer behavior. – grok_in_full Mar 19 '21 at 17:48

score 1 · Answer 3 · answered Aug 10 '21 at 08:26

1

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;

answered Aug 10 '21 at 08:26

Urs Bo

308
1
11

score 0 · Answer 4 · answered Jul 12 '22 at 12:11

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.

score -1 · Answer 5 · answered Feb 01 '16 at 13:33

-1

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.

answered Feb 01 '16 at 13:33

Dmitrii Fediuk

434
9
11

i tried with important as well but it didnot worked and what would be about javascript. – Yatin Khullar Feb 01 '16 at 16:33

score -1 · Answer 6 · answered Sep 11 '16 at 17:40

-1

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()
};

answered Sep 11 '16 at 17:40

Alan

213
1
4

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. – Sweet-Apple Jul 15 '22 at 09:26

Cannot see changes in Magento 2 js and css

6 Answers6