2013-02-22 5 views
6

LESS hat die Macht, andere LESS-Dateien zu importieren. Diese Frage soll eine Lösung zum Importieren von LESS-Dateien in LESS-Dateien aus einem anderen Bundle in einem Symfony-Projekt findenSymfony 2 wie LESS-Dateien aus einem anderen Bundle zu importieren

Ich arbeite an einem Symfony2-Projekt und nutze LESS und Assetic, um Änderungen zu beobachten. Meine LESS-Dateien können andere LESS-Dateien importieren, aber nur, wenn sie sich im selben Paket befinden.

Wenn ich versuche, aus einem anderen Bündel zu importieren, stoppt die Assetic-Uhr mit dem Fehler "Variable undefiniert", weil der Import fehlschlägt.

Ich habe alle möglichen Pfade in der Import versucht:

in einer weniger Datei in einem anderen Bundle:

@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'); 

Ich bin sicher, dass ich einige richtige Wege versucht haben, aber sie nie arbeiten, weil die Datei in einem anderen Paket ist und die Compiler-Prozesse "Assetic Watch/LESS" zwischen den Bundles nicht gut funktionieren.

Irgendwelche Ideen jemand?

+0

Ist es auch eine Option für Sie assetic zu verwenden, um die weniger Dateien zu kombinieren, anstatt sie einem anderen innerhalb eines ffrom zu importieren? –

+1

Sehr unwahrscheinlich .. Ich brauche die Möglichkeit, andere LESS-Dateien zu importieren, um das Verhalten anderer zu erweitern, während ich mich entwickle. –

+1

Schauen Sie sich die Filterdefinition an, es scheint, dass es keine Möglichkeit gibt, benutzerdefinierte Pfade (für die Suche nach Einschluss) zu übergeben https://github.com/symfony/AsseticBundle/blob/master/Resources/config/filters/less.xml. Dies ist die Methode zu nennen: https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/LessFilter.php#L59 – gremo

Antwort

5

Ich denke, dass Sie die Pfade von Web/Bündel Dir verwenden müssen.

ich bin Dateien auf diese Weise importieren:

ich habe 2 weniger Dateien:

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

Ich möchte style1.less in style2.less importieren

style2.less:

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

mit: cssrewrite Filer, lessphp

auch daran denken, die LESS-Dateien mit ihrem tatsächlichen, öffentlich zugänglichen Weg zu verweisen: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

+0

Funktioniert auch für Stylus-Filter (Styl-Dateien). –

1

Hier ist ein komplettes Arbeitsbeispiel zumindest auf Symfony 2.8 . Dieses Beispiel verwendet Assetic und soll mit der Einbettungsdatei in Ihrem CSS arbeiten.

Hier die arborescence

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

Also sagen wir mal /src/Acme/MyBundle/Ressources/public/css/main.scss ist die Datei mit allen Erklärung, die ich in importieren möchten meine anderes Bündel (in meinem Fall verwende ich Sass, aber es ist das gleiche mit weniger).

In /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss Ich werde tun:

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

Diese den klassischen physischen Speicherort der Datei verweisen, so dass Ihre IDE finde es.

Jetzt der interessante Teil.Wir möchten alle scss-Dateien in nur eine CSS-Datei kompilieren, minimieren und umbenennen. Das können wir mit Assetics machen.

In einer Zweigdatei, wo Sie Ihre CSS laden (in meinem Fall /app/Ressources/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 %} 

==> Hier müssen Sie die Datei aus dem Verzeichnis/Web-Verzeichnis beziehen (so mit 'Bündel/acmemybundle ..' Syntax. Sie müssen den Vermögenswert in Symlink-Modus installieren. (PHP app/console Asset : installieren --symlink)

==> Sie können in Ihrem conf.yml setzen, was Sie in der Ausgabe filemane und Ort wollen, da Sie im Web-Verzeichnis bleiben

und finaly

# 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 

. Der wichtige Teil hier ist die load_paths in Kompass. In der grundlegenden Einrichtung Sie Kompass haben: ~ Sie müssen es ändern für:

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