1

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

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/
| improve this answer | |
  • 1
    Thank you so much, I was starting to pull my hair out. – Goodbytes Apr 11 at 11:31
  • You're welcome! You may want to look into the "Grunt" command line tool. "grunt watch" detects changes in your source LESS files and automatically deletes and rebuilds the CSS files. It's very useful in a development environment. – Geat Apr 13 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.