How can I control the order of css files if I am using registerCssFile function? In my application, some css files are registered in the layout and some css files are registered in the view. The view is processed earlier than layout, but this is not the order that I want for css file registration.
So, is there a way to specify the order?
Does anyone know?
You should send from the view to the layout or vice-versa and then add it all in 1 place
To do that define some public variable in your controller and then in the layout and viwe use
$this->css[]='one more.css';
Then you can do what you want
I don’t know if there’s any other way
Thank you!
I’ve stumbled across this thread a few times, as I love Yii framework but have often found myself frustrated with its gross indiscretion as to the order it throws REL tags for the style sheets I’ve specified.
Today, I puzzled this conundrum once more. The problem I’m trying to solve is that I need CSS rules in certain stylesheets to deprecate the broader rules in previous stylesheets. And today I realized the solution, not from the school of PHP architecture, but from the school of CSS science. Perhaps, in their great wisdom, the grandfathers of this framework were simply trying to coach our CSS best practices.
When a conflict exists as to the value of a particular property of an element, CSS natively chooses the most specifically selected rule to supersede the others.
Therefore, if I have previously defined a button style in my global stylesheet:
.button {
color: blue;
height: 20px;
}
The following definition—even if the stylesheet containing it is loaded prior to the one above—will override the color:
.rightside .button {
color: red;
}
Thereby I’ve ceased my complaining about style sheet load order, and focused the energy on writing properly disambiguated selectors.
Over and out.
NK
Hello Guys,
I wrote this to extension to overcome this issue:
Unfortunately there is documentation because I haven’t had time to write any, but you can look at the code to figure out how to use it.
The way it works is that you can give it an array of both css and javascript files in a specific order and it will make sure that they are loaded in the correct order. Note that you do not have to list all your scripts, just those that you want to ensure that are loaded in the correct order.
Not the perfect solution but it has worked for us.
I had to change the order of css and js files today. What this thread does NOT talk about is the real straightforward solution of setting dependencies. If the new asset is dependent an existing asset and should therefore be called later, just set the dependency as below. In this example Jquery and Bootstrap4 are dependencies.
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
class TempleAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/CustomCSS.css',
'css/owl.css',
];
public $js = [
'js/custom.js',
'js/owl.js',
'js/accordions.js',
];
public $depends = [
'yii\web\JqueryAsset',
'yii\bootstrap4\BootstrapAsset',
];
}