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
Add a comment
|
5 Answers
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';
- clear cache
- php bin/magento setup:static-content:deploy
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.
-
2perfect answer with explanation!!! +1 :)SagarPPanchal– SagarPPanchal2018-10-09 11:47:56 +00:00Commented Oct 9, 2018 at 11:47
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.
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.
-
1If you delete the .htaccess file in pub/static you have to copy that from fresh installation. Otherwise it breaks frontend.Webninja– Webninja2018-04-17 19:06:01 +00:00Commented Apr 17, 2018 at 19:06
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'
},
