Düğüm-sass üzerinden Symfony assetik sass filtresi?

Question

Taklit alternatifi yerine node-sass ile çalışmak için yardımcı bir sass filtresi almam konusunda bazı zorluklar yaşıyorum. Benim config.yml dosyasında aşağıdaki yapılandırmaya sahip: bu hak node-sass komutu tetikler rağmen

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)%" 

, ben yapılandırmasının doğru olduğundan emin değilim. ruby: null'u kaldırırsam, tamamen yanlış olan C:\Program Files...\path\to\ruby.exe %%USERPROFILE%%\\AppData\\Roaming\\npm\\node-sass'u çalıştırmayı dener. Ancak, ruby: null olması sorunu da çözmüyor, çünkü yanlış argümanları (yani yerine --load-path) ayarlıyor ve bu da işleri karıştırıyor.

yerine sass filtresini node ile nasıl ayarlayacağını bilen var mı?

Answer 1

Çözümü, bu sorunla ilgili olarak, başkalarının da deneyimlediği herhangi bir kişi için paylaşmak istiyorum.

BaseSassFilter'un yalnızca yakut sürümü ile çalışmaya uygun olduğu anlaşılıyor. Bu yüzden kendi filtremi oluşturmaya karar verdim. İşte benim sınıftır:

<?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) 
    { 
    } 
} 

Sonra içinde senin config.yml Eklemek aşağıdadır:

<?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> 

Bu işler için çalışan almalısınız:

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

app/config/filters/nodesass.xml için aşağıda belirtilen xml ekleyin şimdi.