6

I am modifying a module which uses css and js.

OS : WINDOWS
Magento Mode : Developer

What I've tried :

php bin/magento setup:static-content:deploy php bin/magento indexer:reindex deleted cache folder under var/cache deleted C:\xampp\htdocs\magento2\pub\static ( except .htaccess file)

By doing this all the css and js updates, but I have to do it each time even for minor css changes

In ubuntu, it works fine when I am in developer mode. I opened it private browser, even flushed the browser cache.

Update: In developer mode on windows environment if we delete all the files form pub/static folder and than refresh the page it will show the updated css and js .

I have no idea its the only way to work on windows environment as in Linux in developer mode everything got updated as we refresh the page.

To remove version number from files path Stores>Configuration>Advanced>Developer>[ Static Files Settings tab] Sign Static Files to NO

Improve this question
2
  • may be a browser cache issue? Commented Feb 6, 2018 at 10:16
  • 1
    the css and js files are cached in your browser.try hard refreshing the site by ctrl+shift+R Commented Feb 6, 2018 at 10:43

7 Answers 7

Reset to default
2

Follow below mention steps to get "Frequent Css and js changes"

  1. Updating the JS in your respected module,before refreshing page the same file from pub/static/frontend/namespace/theme/ ... module/js/... delete it so after page refresh fresh JS file will generate in pub folder.
  2. Updating the CSS in your respected module, do the Pt. 1 for css.

for more info see this link, In this link i explained for LESS changes as well.

Note : After doing Pt. 1 or/and Pt. 2 still fresh code not reflect in browser then please do hard refresh

Cmd/Ctrl key + Shift key + press R

Improve this answer
2

Magento 2 use soft links for static content materialization which is not available on Windows.

I recommend using a virtual machine with Linux based distributive for development.

Improve this answer
1

I was facing the same issue with my less updates noting showing unless I flushed my static files. The fix for me was to disable mod_expires. This was caching the css and etc.

Inside of the pub/static/.htaccess file you will should have something like the following:

<IfModule mod_expires.c> ############################################ ## Add default Expires header ## http://developer.yahoo.com/performance/rules.html#expires ExpiresActive On # Data <FilesMatch \.(zip|gz|gzip|bz2|csv|xml)$> ExpiresDefault "access plus 0 seconds" </FilesMatch> ExpiresByType text/xml "access plus 0 seconds" ExpiresByType text/csv "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/zip "access plus 0 seconds" ExpiresByType application/x-gzip "access plus 0 seconds" ExpiresByType application/x-bzip2 "access plus 0 seconds" # CSS, JavaScript, html <FilesMatch \.(css|js|html|json)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresByType text/css "access plus 1 year" ExpiresByType text/html "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType application/json "access plus 1 year" # Favicon, images, flash <FilesMatch \.(ico|gif|png|jpg|jpeg|swf|svg)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" # Fonts <FilesMatch \.(eot|ttf|otf|svg|woff|woff2)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-otf "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/font-woff2 "access plus 1 year" </IfModule>

By disabling mod_expires or commenting out the above and doing a hard refresh in your browser (Mac Users hold down Shift + Command + r) your changes should start showing each time you make them.

Improve this answer
0

When debugging changes for JS and CSS, i find it helpful to look at the files that the browser is loading. If you open your inspector in Chrome (Firefox has the same concept) and get into the sources tab you can see the actual files that are being loaded from the pub/static. If you don't see your module's files there, you know that it's not compiling into the pub folder and can debug from there.

enter image description here

If the file is there, you can look at it and see if your changes are there. If they aren''t, delete the file in the pub/static folder, clear the var/view_preprocess folder, re-compile and you should then see your changes.

If it's still not showing up, you might have an issue with file name/directory name issue. And might be a permission issue on the file system itself.

Improve this answer
4
  • i will surely try this way as well on window os , on my workstation ubuntu is installed but on designer windows and mac is installed only on windows i face this issues . Commented Feb 10, 2018 at 12:42
  • If the issue is just on you windows machine, i would say it's most likely a permission/ file ownership issue. I don't work on a windows system, so i can't say how to fix it. But like KAndy is recommending, you might need to spin up a virtual machine to get M2 running. Commented Feb 10, 2018 at 15:05
  • as i think in windows, we can not take or give permissions to any folder except run as administrator, still, i will try again. Commented Feb 11, 2018 at 16:00
  • In Windows (not WSL2/1) I think you must set an XML somewhere to copy not symlink at least on Magento 2.2.0 that I tried. But Magento 2 is not supported on windows so go develop it in Docker/WSL2/Ubuntu. See: devdocs.magento.com/guides/v2.3/install-gde/… Commented Sep 15, 2020 at 3:23
0

Now try this commands and check your private browser:

php bin/magento setup:static-content:deploy -f rm -rf var/cache/* var/generation/* var/page_cache/* var/view_preprocessed/* rm -rf var/cache/* generated/*
Improve this answer
1
  • Wow... I am in developer mode just trying to change one JS file, and I had to first delete that file from the module folder deep down in pub/static/frontend, then run the setup:static-content:deploy command, and then the new file in the pub/static module folder finally was made. I seem to only have to do this if I greatly change my JS file, say from just executing functions to returning a function that does things. Commented Oct 11, 2019 at 17:50
0

What worked for me was changing to Client side less compilation found in:

Stores > Configuration > Advanced > Developer > Frontend Development Workflow

Also make sure your store is in developer mode.

php bin/magento deploy:mode:set developer
Improve this answer
0

In Windows (not WSL2/1) I think you must set an XML somewhere to copy not symlink at least on Magento 2.2.0 that I tried.

But officially Magento 2 is not supported on windows so recommend to develop it in Docker with WSL2 & Ubuntu or rent a server or startup a Linux Virtual PC...

Please See: https://devdocs.magento.com/guides/v2.3/install-gde/system-requirements-tech.html

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.