I want to load all extension's css before custom theme css in <head>
tag.
Right now extension's css file are loading after styles-m.css
and styles-l.css
so I can not override the extension css from my custom theme css.
There are two ways:
1> All css load depending on order in app/etc/config.php
. You can move your module before Magento_theme module then it will load all css of your custom module before your theme css. But in this case when you run setup:upgrade command then again your order will change.
2> You can create your custom module but the first latter of your namespace must be after M
latter because order of module in config.php by default sort by alphabatically. Here you can write your custom css for override all css.
For Module-specific styles, Retrive the directory : /_/web/css Then Modify /source/_theme.less: overrides the default Magento UI library variables values.
Include css:
Your custom default_head_blocks.xml should be located as follows: /Magento_Theme/layout/default_head_blocks.xml. To include a CSS file, add the /" media="print|"/> block in section in a layout file. is specified relative to the theme web directory (/web) For example, the following illustrates how
stylesheets are included in the default Blank theme:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
</page>
For More understanding, see the below URL:
http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-themes.html