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

Posted 2023-02-19

技术标签:

【中文标题】Symfony 2 如何从另一个包中导入 LESS 文件【英文标题】：Symfony 2 how to import LESS files from another bundle 【发布时间】：2013-02-08 06:48:06 【问题描述】：

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 编译过程在包之间不能很好地做到这一点。

有什么想法吗？

【问题讨论】：

您是否也可以选择使用资产来合并较少的文件，而不是从另一个文件中导入它们？不太可能.. 在开发过程中，我需要导入其他 LESS 文件来扩展其他人的行为。查看过滤器定义，好像没有办法通过任何自定义路径（用于搜索包含）github.com/symfony/AsseticBundle/blob/master/Resources/config/…。这是调用的方法：github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/… 另外，看看这个问题（非常相似，但它是针对 SASS 的）：github.com/kriswallsmith/assetic/issues/202 这是一个已知问题，应该尽快修复。看看：github.com/kriswallsmith/assetic/issues/79和github.com/kriswallsmith/assetic/pull/362 【参考方案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='cs-s-rewrite'
    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:
        cs-s-rewrite: ~
        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/"

【讨论】：

【参考方案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: