Symfony 2, как импортировать файлы LESS из другого пакета

Question

LESS имеет право @import других файлов LESS. Этот вопрос предназначен для поиска решения для импорта файлов LESS в файлах LESS из другого пакета в проекте Symfony.

Я работаю над проектом Symfony2, использую LESS и Assetic для наблюдения за изменениями. Мои файлы LESS могут импортировать другие файлы LESS, но только если они находятся в одном комплекте.

Если я пытаюсь импортировать из другого пакета, часы Assetic останавливаются с ошибкой "переменная не определена", потому что импорт не выполняется.

Я пробовал все виды путей в импорте:

В файле LESS в другом комплекте:

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

Я уверен, что попробовал несколько правильных путей, но они никогда не работают, потому что файл находится в другом пакете, и процессы компиляции Assetic watch / LESS не справляются с этим между пакетами.

Любые идеи кто-нибудь?

Answer 1

Я думаю, что вы должны использовать пути из сети / пачки каталог.

я импортирую файлы следующим образом:

у меня на 2 файла меньше:

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

Я хочу импортировать style1.less в style2.less

style2.less:

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

используя: cssrewrite filer, lessphp

также не забывайте ссылаться на файлы LESS, используя их фактический общедоступный путь: http://symfony.com/doc/current/cookbook/assetic/asset_management.html

Answer 2

Вот полный рабочий пример по крайней мере для Symfony 2.8. Этот пример использует Assetic и должен работать с файлом встраивания в вашем CSS.

Здесь древовидность

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

Итак, скажем, /src/Acme/MyBundle/Ressources/public/css/main.scss - это файл со всеми декларациями, которые я хочу импортировать в другой пакет (в моем случае я использую sass, но он такой же, как и с меньшим),

В /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss я сделаю:

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

Это относится к классическому физическому расположению файла, поэтому ваша IDE найдет его.

Теперь интересная часть. Мы хотим скомпилировать, минимизировать и переименовать весь файл scss только в один файл css. Мы можем сделать это с помощью Assetics.

В файле ветки, куда вы загружаете свой CSS (в моем случае /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 %}

==> Здесь вы должны сослаться на файл из каталога / web (поэтому используйте синтаксис "bundles / acmemybundle..". Вам необходимо установить ресурс в режиме символической ссылки. (Php app / console asset: install --symlink)

==> Вы можете поместить все, что вы хотите, в выходное filemane и местоположение, так как вы остаетесь в веб-каталоге.

И, наконец, в вашем 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

Важная часть здесь - это load_paths в компасе. В базовой комплектации у вас есть компас: ~ Вы должны изменить его на:

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