Magento 2: Why my custom CSS isn't working?

Question

I'm creating a new Magento 2 theme.

I've needed to add custom CSS to I'd created 2 CSS files local-l.css and local-n.css in this location:

app/design/frontend/myvendor/mytheme/Magento_Theme/web/css

in order to test some CSS I've added this to both CSS files:

body {
    background-color: red;
}

also I've added this:

<css src="css/local-m.css" />
<css src="css/local-l.css" media="screen and (min-width: 768px)"/>

to

default_head_blocks.xml

and then run this:

php bin/magento setup:static-content:deploy

also, the cache is all disabled from the backend.

I'm a theory, my page should be red but nothing is happening.

What I'm I doing wrong and how can I fix this?

Answer 1

Your css path wrong it should be app/design/frontend/myvendor/mytheme/web/css take reference from <root>/vendor/magento/theme-frontend-luma/web.

If you need to include in module, you need to mention module in CSS path

<css src="Vendor_Module::css/style.css" />

Answer 2

Make sure your tree looks like this:

-app<br/>
--design<br/>
---frontend<br/>
----VendorName<br/>
-----VendorTheme<br/>
------Magento-Theme<br/>
-------layout<br/>
--------default.xml<br/>
--------default_head_blocks.xml<br/>
------media<br/>
-------preview.png<br/>
------web<br/>
-------css<br/>
--------yourcss.css<br/>
------registration.php<br/>
------theme.xml

Answer 3

If you had add css in default_head_blocks.xml file like below:

<css src="css/local-m.css" />
<css src="css/local-l.css" media="screen and (min-width: 768px)"/>

Then you have to add these two file in app/design/frontend/{vendor}/{theme}/web/css folder.

---

And if you had add css in default_head_blocks.xml file like below:

<css src="Magento_Theme::css/local-m.css" />
<css src="Magento_Theme::css/local-l.css" media="screen and (min-width: 768px)"/>

Then you have to add these two css files in app/design/frontend/{vendor}/{theme}/Magento_Theme/web/css folder.