2013-02-22 17 views
6

MENO ha il potere di importare altri file LESS. Questa domanda ha lo scopo di trovare una soluzione per importare file MENO all'interno di file LESS da un altro pacchetto in un progetto SymfonySymfony 2 come importare file MENO da un altro pacchetto

Sto lavorando a un progetto Symfony2, utilizzando LESS e Assetic per osservare i cambiamenti. I miei file LESS sono in grado di importare altri file LESS ma solo se si trovano nello stesso pacchetto.

Se provo a importare da un altro bundle, l'orologio Assetic si arresta con errore "variabile indefinita" perché l'importazione non riesce.

Ho provato tutti i tipi di percorsi nella importazione:

In un file di meno in un altro fascio:

@import "../../../../MainBundle/Resources/public/less/colors.less"; 

@import "../../../../../../src/website/MainBundle/Resources/public/less/colors.less"; 

@import '/bundles/main/less/colors.less' 

@import url('/bundles/main/less/colors.less'); 

Sono sicuro Ho provato diversi percorsi corretti, ma non hanno mai funziona perché il file si trova in un altro pacchetto ei processi di compilazione di Assetic watch/LESS non funzionano correttamente tra i pacchetti.

Qualche idea a qualcuno?

+0

Va anche un'opzione per l'utilizzo di Assetic per combinare i meno file, invece di importarli ffrom entro l'un l'altro? –

+1

Abbastanza improbabile .. Ho bisogno della possibilità di importare altri file LESS per estendere i comportamenti degli altri, mentre sto sviluppando. –

+1

Guarda la definizione del filtro, sembra che non ci sia modo di passare alcun percorso personalizzato (per cercare l'inclusione) https://github.com/symfony/AsseticBundle/blob/master/Resources/config/filters/less.xml. Questo è il metodo per chiamare: https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/LessFilter.php#L59 – gremo

risposta

5

Penso che sia necessario utilizzare i percorsi dalla directory web/bundles.

sto importazione di file in questo modo:

Ho 2 meno file:

  • src/Acme/FirstBundle/Resources/public/less/style1.less
  • src/Acme/SecondBundle/Resources/public/less/style2.less

voglio importare style1.less in style2.less

style2.less:

@import "../../acmefirst/less/style1"; 

utilizzando: cssrewrite filer, lessphp

anche ricordarsi di fare riferimento i file MENO utilizzando il loro attuale percorso, pubblicamente accessibile: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

+0

Funziona anche per il filtro Stylus (file styl). –

1

Ecco un esempio di lavoro completo almeno su Symfony 2.8 . Questo esempio utilizza Assetic e dovrebbe funzionare con file embed nel tuo css.

Qui l'arborescence

/app 
/src 
---/Acme 
------/MyBundle 
---------/Ressources 
------------/public 
---------------/css 
------/MyOtherBundle 
---------/Ressources 
------------/public 
---------------/css 
/web 
---/bundles 
------/acmemybundle 
------/acmemyotherbundle 
---/css 
------/built 

Così diciamo /src/Acme/MyBundle/Ressources/public/css/main.scss è il file con tutta la dichiarazione che voglio importare nel mio altro pacchetto (nel mio caso io uso sass ma è lo stesso con meno).

In /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss lo farò:

@import "../../../../MyBundle/Resources/public/css/main"; 

Questo riferimento alla posizione fisica classica del file, così il vostro IDE Trovalo.

Ora la parte interessante.Vogliamo compilare, minimizzare e rinominare tutti i file scss in un solo file css. Possiamo farlo con Assetics.

In un file di ramoscello in cui si carica il css (nel mio caso /app/Resources/views/css.html.twig).

{% stylesheets 
    filter='compass' 
    filter='?uglifycss' 
    filter='cssrewrite' 
    output='css/built/myMinifiedAndCompiledSass.css' 
    'bundles/mybundle/css/*.scss' 
    'bundles/myotherbundle/css/*.scss' 
    %} 
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}"> 
    {% endstylesheets %} 

==> Qui si deve fare riferimento il file dalla directory/web (in modo da utilizzare 'fasci/acmemybundle ..' sintassi. È necessario installare l'attività in modalità link simbolico. (Php app/console di asset : installare --symlink)

==> si può mettere quello che vuoi in filemane uscita e la posizione in quanto si rimane nella directory web

e finalmente nel vostro conf.yml

# Assetic Configuration 
assetic: 
    filters: 
     cssrewrite: ~ 
     sass: ~ 
     compass: 
      load_paths: 
        - "/usr/bin/compass" 
        - "%kernel.root_dir%/../src/Acme/MyBundle/Resources/public/css/" 
     uglifycss: 
      bin: %kernel.root_dir%/../node_modules/.bin/uglifycss 
     uglifyjs2: 
      bin: %kernel.root_dir%/../node_modules/.bin/uglifyjs 

.La parte importante qui è il load_paths nella bussola. Nel set up di base è necessario bussola: ~ È necessario modificare per:

compass: 
       load_paths: 
         - "/usr/bin/compass" 
         - "%kernel.root_dir%/../src/Acme/MyBundle/Resources/public/css/" 
Problemi correlati