Symfony assetic sass filter through node-sass?

Question

I'm having difficulty getting an assetic sass filter to work with node-sass instead of a ruby ​​alternative. I have the following configuration in config.yml file:

 assetic: debug: "%kernel.debug%" use_controller: false bundles: [ ] write-to: "%kernel.root_dir%/../web/assets" read_from: "%kernel.root_dir%/../web/assets" node: "%%PROGRAMFILES%%\nodejs\\node.exe" node_paths: ["%%USERPROFILE%%\\AppData\\Roaming\\npm\\node_modules"] sass: "%%USERPROFILE%%\\AppData\\Roaming\\npm\\node-sass" ruby: null filters: cssrewrite: ~ scss: output-style: compressed apply_to: "\.(scss|sass|css)%" 

Although this calls the correct node-sass , I'm not sure if the configuration is correct. If I remove ruby: null , it will try to run C:\Program Files...\path\to\ruby.exe %%USERPROFILE%%\\AppData\\Roaming\\npm\\node-sass , which is absolutely wrong . But having ruby: null also does not solve the problem, because it sets the wrong arguments (for example, --load-path instead of --include-path ), and it is also useless.

Does anyone know how to set sass filter using node instead of ruby ?

Answer 1

I would like to share my solution on this issue with anyone who might be experiencing it.

It seems that BaseSassFilter is only suitable for working with the ruby ​​version. So I decided to create my own filter. Here is my class:

 <?php namespace App\YourBundle\Assetic\Filter; use Assetic\Asset\AssetInterface; use Assetic\Exception\FilterException; use Assetic\Filter\Sass\BaseSassFilter; use Assetic\Filter\Sass\SassFilter; /** * This class is based on Assetic\Filter\Sass\SassFilter and is slightly modified to work with node-sass instead of Ruby. */ class NodeSassFilter extends BaseSassFilter { const STYLE_NESTED = 'nested'; const STYLE_EXPANDED = 'expanded'; const STYLE_COMPACT = 'compact'; const STYLE_COMPRESSED = 'compressed'; private $sassPath; private $scss; private $style; private $quiet; private $cacheLocation; public function __construct($sassPath = '/usr/bin/node-sass') { $this->sassPath = $sassPath; $this->cacheLocation = realpath(sys_get_temp_dir()); } public function setScss($scss) { $this->scss = $scss; } public function setStyle($style) { $this->style = $style; } public function setQuiet($quiet) { $this->quiet = $quiet; } public function filterLoad(AssetInterface $asset) { $sassProcessArgs = array($this->sassPath); $pb = $this->createProcessBuilder($sassProcessArgs); if ($dir = $asset->getSourceDirectory()) { $pb->add('--include-path')->add($dir); } if ($this->style) { $pb->add('--output-style')->add($this->style); } if ($this->quiet) { $pb->add('--quiet'); } // input $pb->add($input = tempnam(sys_get_temp_dir(), 'assetic_sass')); file_put_contents($input, $asset->getContent()); $proc = $pb->getProcess(); $code = $proc->run(); unlink($input); if (0 !== $code) { throw FilterException::fromProcess($proc)->setInput($asset->getContent()); } $asset->setContent($proc->getOutput()); } public function filterDump(AssetInterface $asset) { } } 

Then in config.yml you add the following:

 assetic: filters: nodesass: bin: "%sass.bin%" resource: '%kernel.root_dir%/config/filters/nodesass.xml' style: compressed apply_to: "\.scss%" 

In app/config/filters/nodesass.xml you add the following xml:

 <?xml version="1.0" ?> <container xmlns="http://symfony.com/schema/dic/services" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd"> <parameters> <parameter key="assetic.filter.nodesass.class">App\YourBundle\Assetic\Filter\NodeSassFilter</parameter> <parameter key="assetic.filter.nodesass.bin">%assetic.sass.bin%</parameter> <parameter key="assetic.filter.nodesass.timeout">240</parameter> <parameter key="assetic.filter.nodesass.style">null</parameter> <parameter key="assetic.filter.nodesass.load_paths" type="collection" /> </parameters> <services> <service id="assetic.filter.nodesass" class="%assetic.filter.nodesass.class%"> <tag name="assetic.filter" alias="nodesass" /> <argument>%assetic.filter.nodesass.bin%</argument> <call method="setTimeout"><argument>%assetic.filter.nodesass.timeout%</argument></call> <call method="setStyle"><argument>%assetic.filter.nodesass.style%</argument></call> <call method="setLoadPaths"><argument>%assetic.filter.nodesass.load_paths%</argument></call> </service> </services> </container> 

This should make everything work now.