Adding CSS to child themes _extend.less has no effect
-
13-04-2021 - |
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
Solution
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/