How to add a custom CSS file in Magento 2

In order to do add custom css and load last, you must set up a custom theme.

  1. Create theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Make sure that you set your Magento application to the developer mode.
  3. Add the following folders to your custom theme

--

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Create the following files:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

place this code within default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Deploy static resources (SSH to magento root):

--

php bin/magento setup:static-content:deploy

In order to add custom css and load last

  1. Follow the directory structure

    app / code / vendor / modulename / view / frontend(for admin adminhtml) / web /css / filename.css

  2. Add the css file path to the corresponding layout file as given below

    <head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

You can add the media attribute which magento 2 will put to the end of the css in the head section. Setting a width of only 1px will enable it on all devices:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

Tags:

Css

Magento2

Recent Posts