How to use SASS/ SCSS in Yii2?

Question

I want to use sass/scss in a new project, but it somehow doesn't work. I am using the yii2-asset-converter and when I try to convert the scss-file, the following error is thrown:

Class @app/extensions/assetparser/vendors/phamlp/sass/SassParser does not exist

I am checking the path ../phamlp/ and notice, that the Folder sass resp. SassParser.php doesn't exist. The SassParser.php is located in the extension vendor/richthegeek/phpsass, which is required by yii2-asset-converter.

I have tried out some paths like: @ vendor/richthegeek/phpsass or

__DIR__/../../vendor/richthegeek/phpsass

But it doesn't worked .After a lot of unsuccessful attempts I hope some of you know how to solve the problem.

PS:I use the advanced app template

Answer 1

Don't use PhalmP or phpsass. These are outdated. You'll never get satisfactory results with them, especially when using modern Sass libraries.

Use original Sass as a standalone.

Simply install Ruby (you might already have it) and Sass and use the sass command line tool to compile.

Also, using Compass might make your life easier. Compass helps organizing your Sass code and also provides a Sass library with a lot of useful helpers.

Answer 2

You can use this plugin.

But you must combine your sass code in single file.

Here's example of config/web.php

'assetManager'=>[
        'converter'=>[
            'class'=> 'nizsheanez\assetConverter\Converter',
            'force'=> true, // true : If you want convert your sass each time without time dependency
            'destinationDir' => '', //at which folder of @webroot put compiled files
            'parsers' => [
                'scss' => [ // file extension to parse
                    'class' => 'nizsheanez\assetConverter\Scss',
                    'output' => 'css', // parsed output file type
                    'options' => [ // optional options
                        'enableCompass' => true, // default is true
                        'importPaths' => ['/sass','/sass/_offers'], // import paths, you may use path alias here,
                        // e.g., `['@path/to/dir', '@path/to/dir1', ...]`
                        'lineComments' => true, // if true — compiler will place line numbers in your compiled output
                        'outputStyle' => 'expanded', // May be `compressed`, `crunched`, `expanded` or `nested`,
                        // see more at http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
                    ],
                ],
            ]
        ]
    ]