magento 2 custom css in custom theme not being applied

Question

I am having a problem with my custom theme in magento 2, for some reason the css I'm writing isn't showing up on the site.

I have created my custom theme at

app/design/frontend/Matt/New/ 

it's parent is the blank theme and I am able to apply the theme with no errors. I have created a less file at

web/css/source/style.less 

the contents of the file is

#maincontent{
 background-color: blue;
}

I can run "grunt exec:New" and that works without any errors. I can then deploy with no errors. If I then restart xampp and reload the site the style is not applied. I have checked the source by pressing "ctrl + u" and I can see that the style.less file is there under

<link href="http://test.dev/pub/static/version1484246990/frontend/Matt/New/en_GB/css/source/style.less" />

The styles are not in the either of the files styles-m.css or styles-l.css though. I have tried clearing cache, deleting pub/static. I'm not sure what else to do or what the problem could be, does anyone have any possible solutions?

Answer 1

From my understanding there are only two files that get automatically picked up and pulled into the styles-m.css and styles-l.css files from your theme:

_extend.less

and

_theme.less

The _theme.less file will override the same file in the parent theme, were as the _extend.less will just be added onto the other files. Try changing that and see if your styles show up.

• Matt: Thanks so much, that worked. I don't know how I didn't noticed that in the documentation!
• circlesix: sweet, glad it worked!