i am struggling to find the information i want regarding the location and method by which magento2 child themes inherit the custom css stylesheet. From my limited understanding of inheritance in magento2 i believe the child theme's custom.css location should mirror that of the parents theme. But will this replace the parent theme css or simply add the child theme's css at a higher priority?
1
-
If you use magento's blank or luma theme as parent theme then I would recommend to extend the parent themes less files via _extend.less file. <magento-root>/app/design/<Vendor>/<theme>/web/css/source/_extend.less here you can overwrite the parent. That is the simplest solution I guess– juhanixCommented Jun 2, 2017 at 11:39
Add a comment
|
1 Answer
You can add your css custom code in _theme.less
location file app/design/frontend/Vendor/theme/web/css/source/_theme.less
Example you extend blank theme
Add your css add last in head tag of file default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
// Original load
<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"/>
<!-- Add your own CSS files here -->
<css src="css/dropkick.css" />
<css src="css/your-styles.css" />
</head>
Add custom css in scope Magento_Module
app/design/frontend/Vendor/yourthemename/Magento_Catalog/web/css/source/_extend.less
& when (@media-common = true) {
\\ Extend catalog module styles
\\ Use your css code here
}
