Our Work

How to load js and css files in Yii 2 application?

Updated 21 day ago

The following two scenarios provides a way to load JS and CSS files in the Yii application.

  • Loading in a particular view file
  • Loading for a complete module

For example, if a "user" module is created in your application as  modules/user then follow the steps listed below

  • Create a folder named as "assets" in module,
  • Create two subfolders in "assets" as JS & CSS and include the files in the respective folders
  • Create an asset file UserAsset.php which extends yii\web\AssetBundle class in the "assets" folder of module.

Declare the following in UserAsset.php

<?php
namespace modules\user\assets;
use yii\web\AssetBundle;
/**
* Class UserAsset
* @package modules\user
*/
class UserAsset extends AssetBundle
{
/**
* @inheritdoc
*/
public $sourcePath = '@app/modules/user/assets';
/**
* @inheritdoc
*/
public $js = [
'js/user.js'
];
/**
* @inheritdoc
*/
public $css = [
'css/user.css'
];
/**
* @inheritdoc
*/
public $depends = [
'yii\web\JqueryAsset',
'yii\web\YiiAsset'
];
}


Load JS and CSS file in View File

To load the above included js and css files in a view file, we need to register UserAsset bundle. Declare the following in modules/user/views/user-management/_form.php :

UserAsset::register($this);

Load JS and CSS file in a Module

To load above included js and css files in a module, we need to register UserAsset bundle at the time of module initialization. Declare the following in modules/user/UserModule.php :

<?php
namespace modules\user;
use yii\base\Module;
use modules\user\assets\UserAsset;
use Yii;
class UserModule extends Module
{
public function init()
{
parent::init();
UserAsset::register(Yii::$app->view);
}
}

Looking for Yii Developer?

Please Contact us if you have any Yii Development requirements. Hire dedicated Yii developers or Yii Development services from KTree. KTree is Best offshore Yii development company with extensive experience in Yii development.

Request For Quote