Magento2 CSS – How to Add a Custom CSS File

cssmagento2

Is there a way to create my own CSS file that loads last in the cascade?

If so, how and where do I add my custom CSS file?

Best Answer

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
Related Topic