3

In Magento 2 I have a custom theme and in the layout folder layout>default_head_blocks.xml which contains the css link.

The css file is contained in web>css>customcss.css - but the file is not linking

Improve this question

5 Answers 5

Reset to default
4

Just add new file here

app\design\frontend\Vendor\Themename\web\css\_new.less

and import this file in source file given path below

app\design\frontend\Vendor\Themename\web\css\_sources.less

import your file

(if there is not available _source.less file in your theme then go to 'vendor\magento\theme-frontend-blank\web\css\source' folder and copy file in your custom theme)

@import '_new.less';
  1. clear cache
  2. php bin/magento setup:static-content:deploy
Improve this answer
3

you can using this code below in your layout:

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>

You have to delete folders

pub/static

var/

deploy static content using command php bin/magento setup:static-content:deploy

check you css changes.

Let me know if you have any issue.

Improve this answer
3

I assume you have path like this:

\app\design\frontend\Vendor\Themename\Magento_Theme\layout\default_head_blocks.xml

Then put the content like following in your default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/customcss.css" />
    </head>
</page>

To add the external CSS or CDN you can use the following 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/customcss.css" />
            <css src="http://cdn.test.com/extra.css" src_type="url"/>
            <script src="http://cdn.test.com/extra.js" src_type="url"/>
        </head>
    </page>

And I assume your customcss.css file as following path :

app\design\frontend\Vendor\Themename\web\css\customcss.css

After doing so you've to clear your cache using following commands

php bin/magento cache:flush

php bin/magento cache:clean

Note: Every Time you've to flush cache unless you are using Gulp/Grunt.

Let me know if you facing any problem.

Improve this answer
1
  • 1
    perfect answer with explanation!!! +1 :)
    – SagarPPanchal
    Oct 9, 2018 at 11:47
0

In your layout's file default_head_blocks.xml inside <head> tag add

<css src="css/customcss.css"/>

You might need to delete folders pub/static, var/page_cache, var/view_preprocessed deploy static content using command php bin/magento setup:static-content:deploy to make your css file effective.

Improve this answer
1
  • 1
    If you delete the .htaccess file in pub/static you have to copy that from fresh installation. Otherwise it breaks frontend.
    – Webninja
    Apr 17, 2018 at 19:06
0

Add below code in default_head_blocks.xml

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

but you need to add less file in your theme dir. under the web/css dir

create custom.less
In custom.less file file import all less files as per your requirment.

magento\dev\tools\grunt\configs\theme.js

    open theme.js file and add your less file under the theme
    Make sure don't give extenstion when you add file.

**For Example**
alive: {
        area: 'frontend',
        name: 'Alive/alivetheme',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/custom'
        ],
        dsl: 'less'
    },
Improve this answer

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.