I recently started working in Magento 2, after reading docs and tutorial I set up my first magento site and is running successfully on my localhost. I am now setting a new Magento 2 project, I used the same way I setup the previous project, but now, my custom.css file not loading and I can't even find that in the page source if it's loaded. I've checked many times the path etc., and everything seems OK.

I've added the custom.css file in the following path:


I have noticed that running the command

php bin/magento setup:static-content:deploy

not generating the custom.css file in the static folder. Please help me sort out where I am doing mistake.


  • Where You added your css
    – Magento 2
    Jun 10, 2017 at 15:25
  • Can you post the code present in default_head_blocks.xml?
    – Sejal Shah
    Jun 10, 2017 at 16:05
  • also keep in mind that if you are not using grunt to compile your styles, you have to delete the contents of the var/view_preprocessed folder. This will hold onto a cached version of the styles, and has to be cleared, even if you are in developer mode.
    – circlesix
    Jun 10, 2017 at 17:06
  • @SejalShah Here is the code <?xml version="1.0"?> <!-- /** * Copyright © 2013-2017 Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <css src="css/custom.css" order="100" /> </head> </page>
    – user54226
    Jun 11, 2017 at 7:46

2 Answers 2


Here is 2 ways to add you custom styles in your theme.

1. Backend

Navigate to Content > Design > Configuration > Select Theme > HTML Head section > Scripts and Style Sheets field

2. Less processor.

here is your theme directory

app / design / frontend / [vendor] / [yourtheme]

create new file

Magento_Theme / web / css / source / _extend.less

add new styles here

deploy changes

you need to deploy static content to see any changes. For development purpose Magento 2 provides grunt tool.

  1. cp package.json.sample package.json
  2. cp Gruntfile.js.sample Gruntfile.js
  3. npm install (yes you need node and npm installed)
  4. add your theme to this file

dev / tools / grunt / configs / themes.js

you will find luma example here

  1. cd Magento_root && grunt watch

More information here http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css_debug.html

  • I like your first approach. What is the script you would type into Content > Design > Configuration > Select Theme > HTML Head section > Scripts and Style Sheets field? To call your own custom CSS sheet from your theme to override everything else?
    – styzzz
    Jul 14, 2017 at 17:40
  • 1
    it's a raw html. There a should be the <link rel="stylesheet" type="text/css" media="all" href="{{MEDIA_URL}}styles.css" /> by default. And styles.css put in pub/media folder. Jul 14, 2017 at 21:17
  • cool yeah that works. i cant seem to get the path right....i want it to be in my theme /web/css/customcss.css
    – styzzz
    Jul 14, 2017 at 23:35

after deploy please Confirm your custom css is created in your theme


if it is not created confirm you are follow the step

Can you please confirm did you created the below step.

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 / custom-m.css
app / design / frontend / [vendor] / [theme] / web / css / custom-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">
    <css src="css/custom-m.css" />
    <css src="css/custom-l.css" media="screen and (min-width: 768px)"/>
  • if you are not created like this please share xml fie. Jun 10, 2017 at 16:06
  • followed the same steps as mentioned
    – user54226
    Jun 11, 2017 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.