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?
Best Answer
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.