Magento 2 - CSS is only successfully compiled after removing a series of directories

Question

I'm having a little trouble compiling the CSS in Magento 2. I'm well versed in the ways of Magento 1x but I've only worked a little in M2, so I apologise.

When experimenting with M2 I managed the CSS just fine, but the site I'm using in particular has been worked on by another individual so it's been set up in a different way.

Useful Info:

• Magento 2.2.3
• Developer Mode Enabled
• Using built in pre-processor
• Theme is a child of Ultimo theme.
• Site is being run locally on wampserver.

So basically the child theme is set up correctly as far as I can see. However when I attempt to change anything (in Vendor/theme/web/css/_custom.less) it doesn't update at all.

I clear the cache, remove the pub/static folder (being careful with the .htaccess), run php bin/magento setup:static-content:deploy -f (I know that's not needed in developer mode but hey) and clear the preprocessed folder. None of these when run individually update my CSS with the changes made.

I stumbled across this post : Magento2 changes not deployed which tells me to run rm -rf var/page_cache/* var/view_preprocessed/* var/generation/* var/cache/* pub/static/*. After about 2 mins of waiting, my CSS finally updates! This is great but I don't fancy quadrupling my workflow time every time I need to change some CSS.

I've tried running each command individually but no updates are made. In fact, if I remove the styles-l.css, the file gets regenerated but without the updates!!

I should also mention that any changes I do to template files update just fine - no deployment needed.

Please can anyone advise me what I could or could not have configured? The staging site works just fine as does the version on my colleague's machine.

Answer 1

You should install grunt which will move files to static when it is compiled or you can work directly in static folder files and move the files when development is done.

Also you should disable cache during development.

You can follow this tutorial if you want to install grunt - https://firebearstudio.com/blog/magento-2-grunt.html

You can read more about grunt and less compilation here -http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css_debug.html

Answer 2

First of all, don't use static content deploy in developer mode, that is only when you compile for production, use grunt to have a live compilation of your changes . In developer mode M2 creates symlinks for less files , when you run the static:content:deploy you get out of the magento way of working in developer mode, configure your theme in magento_root\dev\tools\grunt\configs\local-themes.js run grunt exec:your_theme, grunt less:your_theme and grunt watch should work fine, and don't forget to disable on your local enviornment the caches for block_html, layout and full_page this will help you with your developing

Answer 3

A few tips:

• You need to clear var/view_preprocessed whenever you add a new JS/LESS/SCSS file
• I highly recommend using Frontools (Gulp) if possible as it takes so much pain out of the front-end workflow.
• If SCSS and Gulp is not an option then the built-in Grunt workflow is a slight improvement and will work out the box. It also supports live reloading, although it rarely works for me.

I wouldn't advise disabling caches as it will make your environment run slower and you may miss issues with private content rendering when it actually won't render when deployed as caches are enabled.

TL:DR - The default workflows are slow and not very developer friendly, you need to change this workflow if you want an easier experience.