5

I'm starting a new project using Magento 2.1 and I'm a little confused on how LESS compilation works.

I created a child theme using a purchased theme as the parent. Inside my child theme, I added _custom.less inside

app/design/frontend/MYVENDOR/MYTHEMENAME/web/css/ .

I cleared out everything from pub/static/ and then deployed static content using

bin/magento setup:static-content:deploy

I'm not sure if that's necessary in developer mode, but I'm running it anyways.

I can't figure out if this is compiling and if it is, where it's going. There's a chance that the CSS I've included to change the background-color of body is being overridden by something else, but even if that's the case I can't find the CSS anywhere in the compiled CSS files.

I'm guessing this should be going into styles-m.css, but I'm really not sure. Is there additional configuration I need to do to tell Magento to include _custom.css when it compiles?

  • To expand on this a little bit, I went digging around a little bit inside the purchased theme that I created a child of (Ultimo). Inside app/design/frontend/Infortis/base/web/css/styles-m.less there is a reference to @import '_infortis_theme.less'; Then, inside _infortis_theme.less there is a reference to @import '_custom.less'; So unless I'm completely misunderstanding, it seems like app/design/frontend/MYVENDOR/MYCHILDTHEME/web/css/_custom.less should be compiled into styles-m.css...but maybe I'm missing something. – user1608993 Dec 30 '16 at 19:32
  • Ok, weird. I changed the mode from developer to production and something broke during the process, so I switched it back to developer and took it out of maintenance mode. Now my LESS is being compiled into styles-m.css. I have no idea what's going on. – user1608993 Dec 30 '16 at 20:12
0

Base or main less files are located in /app/design/frontend/{vendor}/{theme}/web/css/, while custom less or "more specific" less files are usually located in /app/design/frontend/{vendor}/{theme}/web/css/source/

I'm not sure about where Ultimo theme points to _custom.less, but you are correct that it is imported from the "main" less files like styles-m.less and it "chain-imports" the "more-specific" less files.

Also I noticed that in your comment you said that the styles-m.less is located in `/app/design/frontend/{vendor}/{theme}/base/web/css/.

If it imports from there, then I presume that the _custom.less should also be located in .../base/web/css or .../base/web/css/source - depending on the import syntax (@import '_custom.less' or @import 'source/_custom.less')

When changing less files, you need to clear static files and cache to see the effect on your site.

If you're in developer mode, just use the Admin Cache Management buttons Clear Static Files Cache and Flush Magento Cache.

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.