Symfony 2 如何从另一个包中导入 LESS 文件

Question

LESS 有权@import 其他 LESS 文件。这个问题旨在找到一种解决方案，从 Symfony 项目中的另一个 Bundle 中导入 LESS 文件中的 LESS 文件

我正在开发一个 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

这是至少在 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，但是less也是一样）。

在 /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss 我会这样做：

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

这指的是文件的经典物理位置，因此您的 IDE 会找到它。

现在是有趣的部分。我们希望将所有 scss 文件编译、缩小并重命名为一个 css 文件。我们可以使用 Assetics 来做到这一点。

在您加载 css 的 twig 文件中（在我的例子中是 /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 assets:install --符号链接）

==> 您可以在输出文件名和位置中放置任何您想要的内容，因为您保留在 web 目录中。

最后在你的 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/"

Answer 2

我认为你必须使用来自 web/bundles 目录的路径。

我正在以这种方式导入文件：

我的文件少了 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 文件管理器，lessphp

还记得使用它们实际的、可公开访问的路径来引用 LESS 文件： http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets