3

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?

2

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" />
1

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
0

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.

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.