M2 - How to include custom theme directory less file path into my CMS block?

Question

I have created custom theme which is inherit from blank theme,

I have created more than one CMS block and include into CMS page for home page design.

One of my CMS block named service banner

In the CMS block i have created some design:

<div class=" container service-banner">

<div class="row">
<div> </div>
</div>

<div class="row">
<div> </div>
</div>

<div class="row">
<div> </div>
</div>

</div>

I have created _cms_block.less file under

app\design\frontend\Myrwd\mytheme\web\css\source\ _cms_block.less

@media only screen and (max-width: 600px) {
    .container service-banner{
        body {
            background-color: lightblue;
        }
    }
}

and imported into _extend.less file

@@import "_cms_block.less";

How to include custom theme directory CSS file into my CMS block?

Answer 1

1. Create a folder named Magento_Theme and place the CSS styles (in less format obviously) in the _extend.less(web/css/source) file.
2. This CSS will be applied to all the places the block is called.

You can place the CSS style in any of the _extend.less files in the theme. But it is good practice to place it under Magento_Theme folder.

If you want the CSS to be applied to a set of specific pages out of all the pages the block is being rendered, then differentiate the CSS codes using the class name of the body.

Example, product listing page contains the body class of catalog-category-view and product view page has the body class of catalog-product-view.