Re: how to call css files dynamically in magento 2

bharath553 · ‎10-22-2018

hi guys , i have created staic blocks in magento admin and i inserted content as well as css to but i want to move all the css from blocks to one external css file. I did that but i just want to call that css file dynamically . can anyone help me ?

syedhasan · ‎10-22-2018

Hello @bharath553

You can create custom CSS file, follow these steps to create custom CSS file,

app/design/frontend/vendorname/theme/web/css/custom.css

app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

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

after that, you run these commands

rm -rf var/cache pub/static/frontend

php -dmemory_limit=6G bin/magento setup:upgrade

php -dmemory_limit=6G bin/magento setup:static-content:deploy -f

php bin/magento cache:flush

------------------------------------------------

If my answer is useful, please Accept as Solution & give Kudos

Manthan Dave · ‎10-22-2018

Hi @bharath553

You can place your css file in app/design/frontend/VendorName/theme/web/css/yourcustom.css

Then you required to call this files in default_head_blocks.xml file.

You can create this default_head_block.xml file on this location app/design/frontend/vendorname/theme/Magento_Theme/layout/default_head_blocks.xml

Below is code of default_head_block.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/yourcustom.css" />
  </head>
</page>

Hope it helps !

if issue solved,Click Kudos & Accept as Solution

bharath553 · ‎10-23-2018

ok, i can use styles in every block ? or else again i have to create different files of css ?

Manthan Dave · ‎10-23-2018

Hi @bharath553

Yes you can use style in every block - you don't required to create a different css files for different blocks !

if issue solved,Click Kudos & Accept as Solution

bharath553 · ‎10-23-2018

but its not working can you check once , Ill post the details below

staitc block which is created in admin side :

code :

hi

</div>

naturals.css file location :

/Applications/MAMP/htdocs/aeroflow/app/design/frontend/Sm/maximum/web/css/naturals.css

css code:

.sms{
font-size: 18px;

}

block path :

/Applications/MAMP/htdocs/aeroflow/app/design/frontend/Sm/maximum/Magento_Theme/layout/default_head_blocks.xml

block code :

page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="x_ua_compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<css src="css/naturals.css" />

</head>
</page>

ran all the commands

bharath553 · ‎10-23-2018

hi can anyone help me ?

Manthan Dave · ‎10-23-2018

Hi @bharath553

Have you checked your css is loading or not ?

if issue solved,Click Kudos & Accept as Solution

bharath553 · ‎10-23-2018

Actually after setting all those i could not find the block in frontend.