I setup a custom theme based on Magento Blank theme. If I inspect the styles I see different css styles? I thought it should only show styles-l.css and style-m.css? Whats wrong here?
Debugging Magento 2 CSS Files in Chrome Developer Tools
csslessmagento2theme
Related Solutions
Look at vendor/magento/theme-fronted-luma/web/css/source/_theme.less (line 19-20) and you will find:
@icons__font-path: '@{baseDir}fonts/Luma-Icons';
@icons__font-name: 'luma-icons';
inside vendor/magento/theme-fronted-luma/web you will also find the fonts dir. Try to copy the font dir in the appropriate dir inside your custom theme and change the 2 less variables.
I just had this issue, too, and found that it is because of the order by which the css and less are compiled. You need to use the style.less file. Copy that from the blank theme and I noticed that the .css files were then auto generated with my custom css directory. However, any changes that would need to be made in the styles.less could mostly likely be made in the _theme.less. This is how I ultimately solved the issue. Within the _theme.less you can make specific css changes or make changes to variables like colors and such.
Here are a couple of examples:
*Overriding colors
@color-darkslateblue: #2d5986;
@color-bluehover: #426992;
@color-floralwhite: #f8f8ee;
@color-blue1: @color-darkslateblue;
@color-blue2: @color-bluehover;
/*customizations*/
.nav-sections {
background: @color-darkslateblue;
}
Best Answer
Google Chrome shows the source of the CSS and M2 uses LESS which is then coimpiled into CSS.
Chrome gets the LESS file source from the Source Maps provided in your theme files.
To update or edit styles of a Magento 2 theme you should do so by updating the less files and compiling either using Grunt or M2's server side LESS compilation.
You can find full details of CSS preprocessing in M2 in there documentation
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html