How to use SASS / SCSS in Yii2?

Question

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

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

I check the path ../ phamlp / and notice that the sass resp folder is. SassParser.php does not exist. SassParser.php is located in the / richthegeek / phpsass extension provider, which is required by the yii2-asset converter.

I tried some ways, for example: @ vendor/richthegeek/phpsass or

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

But that did not work. After many failed attempts, I hope some of you know how to solve the problem.

PS: I use the advanced application template

Answer 1

Do not use PhalmP or phpsass. They are out of date. You will never get satisfactory results with them, especially when using modern Sass libraries.

Use the original Sass as a separate.

Just install Ruby (maybe you already have it) and Sass and use the sass command line sass to compile.

In addition, using Compass can make your life easier. Compass helps organize your Sass code, and also provides a Sass library with many useful helpers.

Answer 2

You can use this plugin .

But you have to combine your sass code in one file.

Here is an example 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, // eg, `['@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 ], ], ] ] ]