Adding CSS to child themes _extend.less has no effect

Question

I have set up a child theme of Luma and can see it is being loaded by looking at the page source in the browser. I now want to customise the styling of the theme.

I followed the instructions here: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-guide/css_quick_guide_approach.html "Simplest way to extend parent styles" by adding an _extend.less file in:

public_html/app/design/frontend/Magento/luma_child/web/css/source/_extend.less

However, any changes made here are not having any impact. For example, the default page background is white: #ffffff.

As a test I added:

body { background-color: red; }

to my _extend.less file and nothing changed. I tried running php bin/magento cache:clean but this doesn't fix the problem.

I know this question has been asked a lot but nothing is working for me.

I am in development mode and using server-side .less compilation.

Have I missed out a step, where am I going wrong?

I guess .less files are compiled by the server when the page loads and I don't need to run any commands.

Thanks

Answer 1

In developer mode, Magento deploys files on demand, but it won't do it if they already exist.

There's two places you need to delete files: the deployed CSS, and the cached LESS.

For a site in US English, from the public_html directory, it will be something like:

rm -rf pub/static/frontend/Magento/luma_child/en_US/css/
rm -rf var/view_preprocessed/pub/static/frontend/Magento/luma_child/en_US/css/