3

This question has been asked a few times but I have yet to find the definitive answer.

When making small css tweaks to the my theme (in developer mode) it seems that in order to see them on the frontend I have to follow these steps to get it to show:

1) Deploy static content for en_GB (my theme/locale)

2) Deploy static content for en_US (admin)

3) Reset file permissions on pub/static - otherwise everything is forbidden.

4) Clear cache

5) Reload frontend

This seems crazy in order just to see a font change colour!

Surely I must be missing something??

Is there a quick way to make css changes?!

Magento ver. 2.0.5

Improve this question
2
  • 1
    None of these answers give you the fastest option. When in developer mode your files should be symlinked, meaning you don't have to wait for LESS to compile either client-side or server-side. If you're in developer mode you my need to clear static content (pub/static) and load the page again. Make sure not to delete pub/static/.htaccess. (edit - if you use less this will not work, but I just edit my own css file for simplicity. Grunt takes 10 seconds just to compile less, not worth it IMHO) Commented Dec 14, 2016 at 17:46
  • 1
    I agree. Essentially in developer mode Magento gives you everything you need without requiring all the little hacks mentioned. To fix this I had to upgrade Magento 2 to 2.1.3 but that solved all my problems. Commented Dec 15, 2016 at 12:21

4 Answers 4

Reset to default
4

You can use client-side compilation:

  1. In the Magento Admin, change the LESS compilation mode to client-side under STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type. For detailed description see the CSS preprocessing topic.

  2. Delete all files in the following directories: pub/static/frontend// var/view_preprocessed/less

Instructions taken from the Dev Docs - http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_mode.html

Although I recommend using your own Gulp/Grunt setup over the build-in ones but that's a larger task than one admin setting.

Improve this answer
2
  • THanks... But now on every page load I get the following errors: FileError: 'example.com/pub/static/version1481736458/frontend/Sulman/…' wasn't found (403) in print.css and no styles load? Commented Dec 14, 2016 at 17:28
  • Try clearing your caches, and then refreshing twice. Sometimes it takes a while compile so your need to refresh twice, if it's the first time you've ran it it can take a good few minutes. Commented Dec 14, 2016 at 17:46
1

I did answer a question very similar to this a couple of days ago. Magento 2 Development Process

This seems crazy in order just to see a font change colour! Surely I must be missing something?? Is there a quick way to make css changes?!

I totally agree! There is a much better way.

Use a task runner like gulp or grunt to auto recompile and clear cache for you.

1) On your local environment disable Magento Cache. You really don't need to have this, but if you really want to keep it enabled you can also clear cache command line way with Grunt or Gulp.

2) Use Grunt or GULP (Grunt easier setup for me) to compile your LESS styles for the shortest feedback loop. Then you will not need to use sudo bin/magento setup:static-content:deploy en_US or en_GB every time. (Setup about 45 minutes - 1 hour if new to LESS I think -> less time if experienced)

Step 3 is optional and was not asked for in OP question but is helpful.

3) You could setup "Live Reload plugin" if you really want it to load automatically. It can detect change on your local files (which were just recompiled for you by your task runner because you saved your .LESS file) and reload in browser for you.

P.S. You will still need to run the setup:static-content:deploy command on production servers and environments.

Improve this answer
1

After you create a theme, before starting to change the styles, is deciding, which LESS compilation mode you will use.

There are two modes available in Magento: server-side compilation mode and client-side (recommended for theme development).

Making simple style changes in client-side compilation mode

In the Magento Admin, change the LESS compilation mode to client-side under STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type.

You can get more details about compilation mode from here : Css compilation mode

Improve this answer
0

This is now working for me:

To fix this I had to upgrade Magento to the latest (2.1.3) but that solved all my problems. I also set less compilation to client side. (as mentioned by Ben Crook and S H Patel). Finally crons weren't set up correctly.

Essentially when in developer mode Magento gives you everything you need without requiring any hacks or add-ons.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.