Symfony 2 jak importować pliki LESS z innego pakietu

Question

LESS ma uprawnienia do @importowania innych plików LESS. To pytanie ma na celu znalezienie rozwiązania do importowania plików LESS w plikach LESS z innego pakietu w projekcie Symfony

Pracuję nad projektem Symfony2, używając LESS i Assetic, aby obejrzeć zmiany. Moje pliki LESS mogą importować inne pliki LESS, ale tylko wtedy, gdy znajdują się w tym samym pakiecie.

Jeśli spróbuję zaimportować z innego pakietu Assetic Watch zatrzymuje się z błędem "zmienna undefined", ponieważ import się nie powiódł.

Próbowałem wszystkie rodzaje ścieżek w imporcie:

w mniej pliku w innym zestawie:

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

Jestem pewien Próbowałem kilka poprawnych ścieżek, ale nigdy działa, ponieważ plik znajduje się w innym pakiecie, a procesy kompilacji Assetic/LESS nie robią tego dobrze między pakietami.

Jakieś pomysły dla każdego?

Answer 1

Myślę, że musisz użyć ścieżek z katalogu web/bundles.

jestem importowania plików w ten sposób:

mam 2 mniejsze pliki:

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

chcę zaimportować style1.less do style2.less

style2.less:

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

używając: cssrewrite filer, lessphp

również pamiętać, aby odnieść Im mniej plików za pomocą ich rzeczywistej, publicznie dostępną ścieżkę: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

Answer 2

Powyżej znajduje się pełna przykładów pracy przynajmniej na Symfony 2.8 . Ten przykład używa Assetic i ma działać z plikiem embed w twoim css.

Tutaj arborescence

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

Więc powiedzmy /src/Acme/MyBundle/Ressources/public/css/main.scss jest plik ze wszystkimi deklaracji, że chcę zaimportować w moim inny pakiet (w moim przypadku używam sass, ale tak samo jest z mniej).

W /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss zrobię:

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

to odnosić do klasycznej fizycznej lokalizacji pliku, więc IDE Znajdź to.

Teraz interesująca część.Chcemy skompilować, zminimalizować i zmienić nazwę całego pliku scss na tylko jeden plik CSS. Możemy to zrobić dzięki Zasadom.

W pliku twig, w którym ładujesz swoje css (w moim przypadku /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 %} 

==> Tutaj trzeba przekazać plik z katalogu/www (tak przy użyciu „pakiet/acmemybundle ..” składnię. Musisz zainstalować ten składnik w trybie dowiązanie symboliczne. (Php app aktywami/konsola : zainstalować --symlink)

==> Możesz umieścić cokolwiek chcesz w filemane wyjściowego i lokalizacji ponieważ pobyt w katalogu stron

i wreszcie w 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 

. Ważną częścią jest tutaj ścieżka_obciążania w kompasie. W podstawowym zestawie up masz kompasu: ~ trzeba go zmienić na:

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