0

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.

  • Where You added your css – Magento 2 Jun 10 '17 at 15:25
  • Can you post the code present in default_head_blocks.xml? – Sejal Shah Jun 10 '17 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 '17 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 '17 at 7:46
1

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 '17 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. – Nicholas Miller Jul 14 '17 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 '17 at 23:35
0

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

pub/static/frontend/Magento/[theme]/en_us

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">
  <head>
    <css src="css/custom-m.css" />
    <css src="css/custom-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  • if you are not created like this please share xml fie. – Rama Chandran M Jun 10 '17 at 16:06
  • followed the same steps as mentioned – user54226 Jun 11 '17 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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