AssetConverter in app-advanced

Yii 2.0 General Discussions
1

Hi all.

Exactly how does AssetConverter work?

For instance, I am theming my app advanced in frontend. I have my directory structure as:

app
- backend
- console
...
- frontend
-- themes
--- myTheme
---- scss
---- css
...
-- web
--- assets
--- css
--- themes
---- myTheme
----- css
...

My intention: convert, with sass, a scss file inside my app/frontend/themes/myTheme/scss directory into app/frontend/web/themes/myTheme/css directory or into app/frontend/themes/myTheme/css directory for later publish.

I’m following this guide to do it. But I don’t have any good results. All my tries finish in an error about not finding any file.

My Asset bundle class is:

class AppAsset extends AssetBundle
{
    public $basePath = '@app/themes/grayscale';
    public $baseUrl = '@web/themes/grayscale';
    public $css = [
        'css/grayscale.scss',
        'vendor/fontawesome-free/css/all.min.css'
    ];
    public $js = [
        'js/grayscale.min.js'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];
    
}

I have configured the command option in various modes without successful results:

'commands' => [
      'scss' => ['css', 'sass @app/themes/grayscale/scss/grayscale.scss:@app/themes/grayscale/css/grayscale.css {from}:{to} --source-map']
],

This one:

'commands' => [
       'scss' => ['css', 'sass @app/themes/grayscale/scss/grayscale.scss:@app/themes/grayscale/css/grayscale.css {from} {to} --source-map']

],

This other:

'commands' => [
       'scss' => ['css', 'sass @app/themes/grayscale/scss/grayscale.scss:@webroot/themes/grayscale/css/grayscale.css {from} {to} --source-map']
],

No one works.

2

How about

'commands' => [
  'scss' => ['css', 'sass {from} {to} --source-map'],
],
3

Hi @samdark

I already configured that, but the command is never called.

And… I forgot to say, I removed the class AppAsset and I replaced it for ThemeAsset but with exactly the same content of the previous class.

UPDATE: Ok I got it, but now, if I have the scss files in the scss directory and I want to publish the results in the web css directory, how do I achieve it?

4

Would you please post current config?

5

I have made some changes in the structure of my web app.

The frontend web directory is outside app:

dir1
dir2
web
- assets
- css
- themes
-- myTheme
--- css (I want to publish the compiled CSS file here)
app
- backend
- console
...
- frontend
-- themes
--- myTheme
---- scss
---- css
...
...

Although it doesn’t matter where the compiled css file is published in my local environment while I finish all to launch at production environment.

app/frontend/config/main.php:

<?php

$params = array_merge(
    require __DIR__ . '/../../common/config/params.php', require __DIR__ . '/../../common/config/params-local.php', require __DIR__ . '/params.php', require __DIR__ . '/params-local.php'
);

return [
    'id' => 'app-frontend',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'controllerNamespace' => 'frontend\controllers',
    'components' => [
        'assetManager' => [
            'bundles' => [
                #'yii\web\JqueryAsset' => [
                #    'sourcePath' => null, 'js' => [],
               #],
               'yii\bootstrap\BootstrapAsset' => [
                    'sourcePath' => null, 'css' => [],
               ],
               'yii\bootstrap\BootstrapPluginAsset' => [
                   'sourcePath' => null, 'js' => [],
               ],
               'yii\jui\JuiAsset' => [
                   'sourcePath' => null, 'css' => [], 'js' => [],
               ],
               '\rmrevin\yii\fontawesome\AssetBundle' => [
                   'sourcePath' => null, 'css' => [],
               ],
           ],
           'converter' => [
                'class' => 'yii\web\AssetConverter',
                'commands' => [
                    'scss' => ['css', 'sass '  . Yii::getAlias('@frontend') . '/themes/grayscale/scss/grayscale.scss ' . Yii::getAlias('@frontend') . '/../../web/themes/grayscale/css/grayscale.css --source-map']
                ],
                'forceConvert' => true
           ],
           'appendTimestamp' => true,
       ],
       'view' => [
           'theme' => [
               #'class' => yii\base\Theme::class,
               'basePath' => '@app/themes/grayscale',
               'pathMap' => ['@app/views' => '@app/themes/grayscale'],
               'baseUrl' => '@web/themes/grayscale',
           ]
       ],
       'request' => [
           'csrfParam' => '_csrf-frontend',
           'baseUrl' => '/web',
       ],
       'user' => [
           'identityClass' => 'common\models\User',
           'enableAutoLogin' => true,
           'identityCookie' => ['name' => '_identity-frontend', 'httpOnly' => true],
       ],
       'session' => [
           // this is the name of the session cookie used for login on the frontend
           'name' => 'advanced-frontend',
       ],
       'log' => [
           'traceLevel' => YII_DEBUG ? 3 : 0,
           'targets' => [
                [
                   'class' => 'yii\log\FileTarget',
                   'levels' => ['error', 'warning'],
               ],
               [
                   'class' => yii\log\SyslogTarget::class,
                   'levels' => ['error', 'warning']
               ]
           ],
       ],
       'errorHandler' => [
           'errorAction' => 'site/error',
       ],
       'urlManager' => [
           'class' => 'yii\web\UrlManager',
           'enablePrettyUrl' => true,
           'showScriptName' => false,
           #'suffix' => '.html',
       ],
   ],
   'params' => $params,
 ];
6

I think is becase the AssetConverter command and the AppAsset relative URL:

Into the command, I pass the full path for origin and destination, but, to make the conversion, I have to set into the CSS array: “scss/grayscale.scss”, and the conversor takes the scss as the base path, so when I check the URL it returns scss/grayscale.css instead of css/grayscale.css

7

Yeah. Looks like so.

8

Does exist any option to implement it without to have the scss/grayscale.scss in the HTML?

As I have implemented it, in my ThemeAsset class, in the css array I pass both, the sccs/grayscale.scss to compile and the css/grayscale.css for link the real CSS file, but obviously, the HTML render will create the css link to scss/grayscale.scss which doesn’t exist.

9

That actually sounds like a bug that is worth reporting to https://github.com/yiisoft/yii2