AssetBundle with custom.css file not working as expected

Yii 2.0 General Discussions
1

Hi,

I want to customise the look of a website by incorporating a css file called custom.css.

I have read information stating that the correct approach is to place your customised css files in the AppAsset class:




class AppAsset extends AssetBundle

{

    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [ 'css/custom.css',

	

    ];

    public $js = [

    ];

    public $depends = [

        'yii\web\YiiAsset',

        'yii\bootstrap\BootstrapAsset',

    ];

}







(www)

   - index.php

   - index-test.php

   (css)

      - custom.css

But this does not work.

However, if I place ‘custom.css’ in the ‘www’ folder




(www)

   - custom.css

   - index.php

   - index-test.php

   (css)

and alter the ‘public $css’ section of the ‘AssetBundle’ to this


public $css = [ 'custom.css',

then it works.

I have tried different options, such as placing the ‘custom.css’ file in the ‘www’ folder and setting the ‘AssetBundle’s’


public $css = [ 'css/custom.css',

, but this, as expected, does not work.

This is a small issue as I can just leave custom.css file in the ‘www’ folder but this will make my file structure look messy.

Any thoughts would be appreciated. I am using the Advanced template.

2

Check You folder & File Permission on respective folders. There is no wrong with configuration.

3

Thanks Ilaiya. I changed the permissions on the ‘css’ folder and the ‘custom.css’ file but still not working.

I don’t know if this is a bug or something missing from my setup. As the application works without showing any errors, I am wondering if it is a bug?

Below is the screen shot of the html with the associated css displayed.

‘custom.css’ file is under the ‘www’ folder and this setup works. (refer to the initial post)

6815

Screen Shot 2015-11-25 at 1.27.56 pm.png

The following screen shot of the html with css: but you will note that there is no entry for ‘custom.css’ in the css section. The ‘custom.css’ file is under the ‘/css/’ folder.

6816

Screen Shot 2015-11-25 at 1.29.51 pm.png

I’m not sure where to go from here.

When you compare the html from both examples,


<link rel="stylesheet" href="/custom.css">

Reload the page to get source for: http://root-app:8888/custom.css

</link>

or


<link rel="stylesheet" href="/css/custom.css">

Reload the page to get source for: http://root-app:8888/css/custom.css

</link>

they both should render the ‘custom.css’ file. But this is not the case.

4

Check your path , it is correct or not.


        

print_r(Yii::$app->basePath); // /var/www/html/yii-advanced/frontend          

print_r(Yii::$app->request->baseUrl);// /yii-advanced/frontend/web

Html content with correct path will like this only (check it via page source in browser)

[html]<link href="/yii-advanced/frontend/web/css/custom.css" rel="stylesheet">

<!-- or – -->

<link href="/yii-advanced/frontend/web/custom.css" rel="stylesheet">

[/html]

5

Hi Ilaiya,

I tried the ‘print_r(Yii::$app->basePath);’ which displays ‘users/gaz/root-app/frontend’.

The second ‘print_r’ statement does not output anything even in html view.

The correct path to my css folder will be:




<link href="/root-app/www/css/custom.css" rel="stylesheet">

I will need to go through the documentation again when I am able to.

Thanks for your time.