Magento – Magento 2 – custom CSS not showing up

cssmagento2

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:

app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml

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.

Thanks.

Best Answer

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.

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

dev / tools / grunt / configs / themes.js

you will find luma example here

cd Magento_root && grunt watch

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

Related Solutions

Magento – How to add custom css in luma theme in magento 2.1.2

You can call your css and js by using Vendorname_Modulename in in the head block. So you need to pass Vendorname_Modulename

Try below code in your layout.xml file :

<head>
        <css src="Vendorname_Modulename/css/jquery.dataTables.min.css"/>   
</head>

Make sure your css and js location are correct .

app\design\frontend\Magento\luma\Vendorname_Modulename\web\css\yourcss.css

app\design\frontend\Magento\luma\Vendorname_Modulename\web\js\yourjs.js

After that run below commands :

php bin/magento cache:clean

php bin/magento setup:static-content:deploy

Magento – Magento 2 not loading custom css

In my case, i just add default.xml to my themes. and it's working fine.

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <update handle="default_head_blocks"/>
  ...

and default_head_blocks.xml

<head>
   ...
   <css src="css/custom.css"/>
   ...
</head>