class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
'css/style.css',
'css/owl.carousel.min.css',
'css/owl.theme.default.min.css',
];
public $sass = [
'css/main.sass',
];
public $js = [
'js/script.js',
'js/main.js',
//'js/bootstrap.js',
'js/owl.carousel.min.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
];
}
You can enumerate the resource files in extended syntax in css and js properties from a resource bundle. For example,
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.less',
];
public $js = [
'js/site.ts',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
When You register a resource bundle in the view, asset manager will automatically launch the tools from the preprocessor and converts the resources in CSS/JavaScript, if extended syntax is recognized. When the view finally display the page, it will include the CSS/JavaScript instead of the original resources in the extended syntax.
Yii uses the file extension names to identify the extended syntax within the website. By default recognized the following syntaxes and the names of the extensions:
LESS: .less
SCSS: .scss
Stylus: .styl
CoffeeScript: .coffee
TypeScript: .ts
GULP for Yii - duncan.OKeefe commented on April 19th 20 at 12:38