6

I'm developing my own theme and I added some styling in _theme.less which I have put in app/design/frontend/MyVendor/mytheme/Magento_Theme/web/css/source/_theme.less. No style changes are updated when doing styling in _theme.less. I've tried deleting the static files and cleaning the cache as well.

I can make CSS changes when adding my own .css file in default_head_blocks.xml but not when trying to use _theme.less. Not sure what the problem is.

Improve this question

3 Answers 3

Reset to default
5

To take effect new changes, first of all, you should delete your var/view_preprocessed/pub and pub/static/frontend folders and files using below command :

rm -rf pub/static/frontend/ var/view_preprocessed/pub/

After that you should deploy your static content :

php bin/magento setup:static-content:deploy -f

then you would see changes you made in _theme.less file.

However, I would recommend you should extend styling using _extend.less, because if you want to use _theme.less file then, first of all, you have to copy all styling which is in Magento luma _theme.less file. And if in future that file changes then you should again copy all content of Magento luma _theme.less file into your _theme.less file.

so the recommendation is to use _extend.less. But in your case above commands will solve the issue.

Improve this answer
1

It sounds like you haven't compiled LESS to CSS. How to do this depends on your workflow, for example this could be setup:static-content:deploy or grunt exec && grunt less.

Improve this answer
3
  • I thought LESS compilation was already implemented in Magento 2? In admin, my workflow type is already set to "Server side less compilation" and I am developing with developer mode. I tried setup:static-content:deploy -f but no changes were made. I'm still new to Magento development but the devdocs says that it should work by just adding the _theme.less file. devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/…
    – Oscar
    Mar 27, 2018 at 7:48
  • 1
    You have it mixed up, server side means you manually compile. And client-side is where it injects a JS file that will compile on each page load.
    – Ben Crook
    Mar 27, 2018 at 9:54
  • Yes that's correct. I followed up on it afterwards. Thank you
    – Oscar
    Mar 27, 2018 at 11:07
1

The _theme.less file is must move in this path /app/design/frontend/MyVendor/mytheme/web/css/source/, and after that you must run this commands: 

rm -rf pub/static/frontend/* var/view_preprocessed/*
php bin/magento setup:static-content:deploy
Improve this answer
4
  • I updated my question with the full path I have used and I have executed that command without any changes. No idea what I'm doing wrong
    – Oscar
    Mar 27, 2018 at 7:58
  • The path of your _theme.less file is not correct, see the correct path in my answer.
    – St3phan
    Mar 27, 2018 at 8:01
  • Magento 2.2 devdocs says to use /<Namespace>_<Module>/web/css . Source
    – Oscar
    Mar 27, 2018 at 8:04
  • 1
    Yes, but you say "I'm developing my own theme" :)
    – St3phan
    Mar 27, 2018 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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