Cannot add styles to M2 theme via _theme.less

Question

We're using a 3rd party OTS theme (Alothemes/Savio). We want to make a couple of minor style adjustments, which are simpler to do/manage in the theme rather than creating/managing a new child theme. I just can't get them to take.

Site is currently in default mode, meaning stylesheets should be generated on-the-fly. We're using the Savio3 theme with an inheritance of: Altothemes/savio3 < Alothemes/default < Magento/blank

I want to add a new style rule that's not defined in any of the inheritance (on .opc-payment). According to the docs and guides, best way to do this is in _theme.less. So I added to Alothemes/default/web/css/source/_theme.less. This file was present but empty.

I cleared cache, cleared Javascript/CSS cache and for good measure, deleted generated styles-m.css and styles-l.css files from the savio3 pub/static/frontend/ theme folder. There is no pub/static/frontend for the default or blank themes.

However, styles-m was regenerated but does not include my added style rule (nor styles-l). So I copied _theme.less to the savio3 theme web/css/source folder and repeated. Stylesheets regenerated but still nothing.

What am I doing wrong?

Answer 1

Using _theme.less is what I was doing wrong! I should have been using _extend.less. However, I had already tried that and couldn't get anything included in _extend.less to appear in my stylesheets.

I checked the theme styles-m.less and saw //@magento_import 'source/_extend.less' was commented out. To my logic, I should uncomment it to include the file. Nope! That broke compilation. I'm sure it's in the docs somewhere, but apparently these lines need to remain commented.

It turns out that what I'd done with _extend.less was correct - the issue is Magento 2 caches. Cleaning pub/static/frontend and using cache:clean is not enough. Appears we also have to manually delete other caches too. They really need to get a grip on M2 caching - it's seems to be a bit of a mess!

In the end, the following worked to include _extend.less:

rm -r pub/static/frontend
rm -r var/cache
rm -r var/view_preprocessed
php bin/magento setup:static-content:deploy -f (optional)
php bin/magento cache:clean

It's quite ridiculous to have to do this every time you want to make a style change! There's got to be a better way - anyone?