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

Question

LESS有能力导入其他LESS文件。这个问题旨在寻找在Symfony项目中从另一个Bundle中导入LESS文件的解决方案。

我正在使用LESS和Assetic监视变化来开发Symfony2项目。我的LESS文件可以导入其他LESS文件，但只有在它们位于同一个Bundle中时才能导入。

如果我尝试从另一个Bundle中导入，Assetic监视就会停止，并显示“未定义的变量”错误，因为导入失败。

我尝试了各种导入路径：

在另一个Bundle的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');

我确定我尝试了几条正确的路径，但它们从未奏效，因为文件在另一个bundle中，而Assetic watch / LESS编译过程在bundles之间的处理并不好。有任何想法吗？

- Antonio Brandao

---

你是否也可以使用 Assetic 来合并 Less 文件，而不是在彼此之间进行导入？ - Thomas K

相当不可能... 我需要在开发过程中导入其他 LESS 文件以扩展其他文件的行为。 - Antonio Brandao

看一下过滤器定义，似乎没有办法传递任何自定义路径（用于搜索包含）https://github.com/symfony/AsseticBundle/blob/master/Resources/config/filters/less.xml。这是调用的方法：https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/LessFilter.php#L59 - gremo

另外，看一下这个问题（它非常相似，但是针对的是SASS）：https://github.com/kriswallsmith/assetic/issues/202 - gremo

这是一个已知的问题，应该很快就会得到修复。请查看：https://github.com/kriswallsmith/assetic/issues/79 和 https://github.com/kriswallsmith/assetic/pull/362。 - Juan Sosa

谢谢大家，任何想解决相同问题的人都可以关注这个问题 https://github.com/kriswallsmith/assetic/issues/79 - Antonio Brandao

Answer 1

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

我是这样导入文件的：

我有两个less文件：

• 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。

- jacobmaster

---

也适用于Stylus过滤器（styl文件）。 - Sebastiaan Ordelman

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文件中包含了所有我想要在其他bundle中引入的声明（我使用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 asset:install --symlink）

==> 由于您停留在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

这里重要的部分是compass中的load_paths。 在基本设置中，你有compass：~ 你需要将其更改为：

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

- Kaizoku Gambare