0

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?

  • 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 – juhanix Jun 2 '17 at 11:39
0

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
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.