Symfony 2 cách nhập tệp LESS từ một gói khác

Question

LESS có quyền @import các tệp LESS khác. Câu hỏi này nhằm mục đích tìm giải pháp để nhập tệp LESS trong tệp LESS từ một Gói khác trong dự án Symfony

Tôi đang làm việc trên dự án Symfony2, sử dụng LESS và Assetic để xem thay đổi. Tệp LESS của tôi có thể nhập các tệp LESS khác nhưng chỉ khi chúng ở trong cùng một gói.

Nếu tôi cố gắng nhập từ một gói khác Đồng hồ tự động dừng lại với lỗi "biến không xác định" do quá trình nhập không thành công.

Tôi đã thử tất cả các loại đường dẫn trong việc nhập khẩu:

Trong một tập tin LESS trong bó khác:

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

Tôi chắc rằng tôi đã thử một số con đường chính xác, nhưng họ không bao giờ làm việc vì tệp nằm trong một gói khác và các quy trình biên dịch Assetic watch/LESS không thực hiện tốt việc này giữa các gói.

Có ý tưởng nào không?

Answer 1

Tôi nghĩ rằng bạn phải sử dụng đường dẫn từ thư mục web/bundles.

tôi đang nhập khẩu các file theo cách này:

tôi có 2 file ít:

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

Tôi muốn nhập style1.less vào style2.less

style2.less:

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

sử dụng: cssrewrite filer, lessphp

cũng nhớ để tham khảo các tập tin LESS sử dụng thực tế, đường dẫn truy cập công khai của họ: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

Answer 2

Dưới đây là một ví dụ làm việc hoàn toàn ít nhất là trên Symfony 2.8 . Ví dụ này sử dụng Assetic và được cho là làm việc với tệp nhúng trong css của bạn.

Ở đây arborescence

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

Vì vậy, trong chúng ta hãy nói /src/Acme/MyBundle/Ressources/public/css/main.scss là tập tin với tất cả các tuyên bố mà tôi muốn nhập khẩu trong tôi bó khác (trong trường hợp của tôi tôi sử dụng sass nhưng nó giống với ít hơn).

Trong /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss tôi sẽ thực hiện:

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

này đề cập đến vị trí vật lý cổ điển của tập tin, vì vậy IDE của bạn sẽ tìm nó.

Bây giờ phần thú vị.Chúng tôi muốn biên dịch, rút ​​gọn và đổi tên tất cả tệp scss thành chỉ một tệp css. Chúng ta có thể làm điều này với Assetics.

Trong tệp tin twig nơi bạn tải css của bạn (trong trường hợp của tôi /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 %} 

==> Ở đây bạn phải tham khảo các tập tin từ thư mục/web (để sử dụng 'bó/acmemybundle ..' cú pháp. Bạn cần phải cài đặt các tài sản trong chế độ liên kết tượng trưng. (Ứng dụng php/console tài sản : cài đặt --symlink)

==> bạn có thể đặt bất cứ điều gì bạn muốn trong filemane sản lượng và vị trí kể từ khi bạn ở trong thư mục web

và cuối cùng trong conf.yml bạn

# 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 

. Phần quan trọng ở đây là load_paths trong la bàn. Trong thiết lập cơ bản bạn có la bàn: ~ Bạn cần phải thay đổi nó cho:

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