How to add a custom CSS file in Magento 2?

Viewed 4
magento-2

Is it possible to create my own CSS file, which will load last in the cascade?

Zack Delt1
1 Answers

To add custom CSS and load last, create 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 2 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

4- 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>

Apply your theme: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html

5 - Deploy static resources (SSH to magento root):

php bin/magento setup:static-content:deploy -f
Zack Delt1