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

cssmagento2xml

Hi As Below path i have added code ,

app\design\frontend\Magento\luma\Magento_Theme\layout\default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.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"/>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
        <css src="Magento_Catalog::css/custom.css"/>
        <css src="Magento_Catalog::css/responsive.css"/>
        <css src="Magento_Catalog::css/owl.carousel.css"/>
        <css src="Magento_Catalog::css/owl.carousel.theme.css"/>
        <css src="Magento_Catalog::css/font-awesome.min.css"/>


        <!--<script src="Magento_Catalog::js/jquery-1.12.2.min.js"></script>-->
        <script src="Magento_Catalog::js/owl.carousel.js"></script>
        <script src="Magento_Catalog::js/custom.js"></script>  


        <link src="https://fonts.googleapis.com/css?family=Lato:400,700,900" src_type="url" />
    </head>
</page>

Also CSS And JS File As Below Path

app\design\frontend\Magento\luma\web\css

app\design\frontend\Magento\luma\web\js

After run command as

  • php bin/magento cache:clean
  • php bin/magento setup:static-content:deploy

Now On frontend no show me file .please help .

Thanks

Best Answer

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
Related Topic