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.

Improve this question
4
  • Where You added your css Commented Jun 10, 2017 at 15:25
  • Can you post the code present in default_head_blocks.xml? Commented 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. Commented 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> Commented Jun 11, 2017 at 7:46

2 Answers 2

Reset to default
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

Improve this answer
3
  • 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? Commented 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. Commented 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 Commented Jul 14, 2017 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>
Improve this answer
2
  • if you are not created like this please share xml fie. Commented Jun 10, 2017 at 16:06
  • followed the same steps as mentioned Commented Jun 11, 2017 at 7:52

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.