Yii2 How to correctly register a CSS file - yii2

Question

I'm trying to register a CSS file in this way
$this->registerCssFile('../node_modules/fullcalendar/dist/fullcalendar.css', [
'depends' => [\yii\web\JqueryAsset::className()]
]);
But I get the error:
Failed to load a resource.
For instance, I know that I am standing at web folder, so that's why I wrote the above code in that way.
I tried without the registerCssFile and I achieved it writing directly this in the view file:
<link href="../node_modules/fullcalendar/dist/fullcalendar.css" rel="stylesheet">
Therefore I think the error is in the registerCssFile cause when I inspect in the browser this method add a slash (/) before all the relative path:
<link href="/../node_modules/fullcalendar/dist/fullcalendar.css" rel="stylesheet">
Anyway, THE QUESTION is how can I do to achieve it with regiserCssFile(the correct way)?
Or how can I remove that slash?
Just in case:
/yii2app
|_/views
|_/whatever
|_myview.php
|_/web
|_/node_modules
|_/fullcalendar
|_/dist
|_fullcalendar.css

Answer 1

The first thing that I would advise you is to move the folder inside the web directory and remove the trailing ../ from the URL.
Like below
$this->registerCssFile('node_modules/fullcalendar/dist/fullcalendar.css', [
'depends' => [\yii\web\JqueryAsset::className()]
]);
The /yii2app/web directory is where your application Entry script is running from so you do not need to provide a path relative to the view file, but the web directory.
Otherwise, use AssetManager to load assets from outside the web directory and use the $sourcePath option to use the directory outside the web.
see below a demo for Asset manager.
namespace app\assets;
use Yii;
use yii\web\AssetBundle;
use yii\web\View;
// set #themes alias so we do not have to update baseUrl every time we change themes
Yii::setAlias('#themes', Yii::$app->view->theme->baseUrl);
/**
* Main frontend application asset bundle.
*/
class FullCalendarAsset extends AssetBundle
{
public $sourcePath = '#app/node_modules/';
public $css = [
'fullcalendar/dist/_fullcalendar.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
];
}
place the above file inside the app/assets directory and then inside your view
use app\assets\FullCalendarAsset;
FullCalendarAsset::register($this);
you should learn about the application LIFE CYCLE.