How do you include a custom LESS file inside of a child theme?

Question

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?

Answer 1

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.