How to use custom css file for layout of a module in Yii2

Question

I am using basic pack of Yii2. I created a module named Admin and I want this module has its own layout. But I don't know where to put all its CSS files. Then, how to include them in layout.php.

My directory structure:

basic
-- module
  -- admin
    -- controllers
       -- DefaultController.php
    -- views
       -- default
       -- layouts
          -- main.php
          -- css
             -- style.css

In main.php, I use this code, but it doesn't work:

<?php $this->registerLinkTag([
    'rel'  => 'stylesheet',
    'href' => 'css/style.css',
]);
$this->head(); ?>

Oleksandr Pyrohov · Accepted Answer · 2018-01-12 10:29:31Z

5

Create custom asset bundle class file here:

frontend/module/admin/assets/AdminAsset.php

It is important to initialize $sourcePath and $css variables properly. Here is an example:

use yii\web\AssetBundle;   

class AdminAsset extends AssetBundle {

    // The directory that contains the source asset files for this asset bundle
    public $sourcePath = '@app/module/admin/web';

    // List of CSS files that this bundle contains
    public $css = ['css/admin.css'];

}

Now you can register this AdminAsset bundle (in layout, view, etc.):

use frontend\module\admin\assets\AdminAsset;
AdminAsset::register($this);

edited Jan 12, 2018 at 10:29

answered Jun 15, 2015 at 12:51

Oleksandr Pyrohov

16.5k6 gold badges76 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aabir Hussain Over a year ago

not able to register Admin. It shows me unable to find class Admin

Brainfeeder Over a year ago

Remove public $basePath = '@webroot'; and public $baseUrl = '@web'; if u use public $sourcePath

Ankush Rishi · Accepted Answer · 2015-06-15 11:07:32Z

-1

Open the 'basic' folder. you will see a folder named assets.
Then open the assets folder and in the AppAsset.php file add your css

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/main.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

answered Jun 15, 2015 at 11:07

Ankush Rishi

369 bronze badges

2 Comments

user1571234 Over a year ago

This will add these css files to the whole project, right ? How can i add to just 1 module ?

Ankush Rishi Over a year ago

So, you can just comment the bootstrap part i.e. public $depends = [ // 'yii\web\YiiAsset', //'yii\bootstrap\BootstrapAsset', ]; It will automatically select the file you need

Collectives™ on Stack Overflow

How to use custom css file for layout of a module in Yii2

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related