6

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

有什么想法吗？

4

2 回答 2

5

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

我以这种方式导入文件：

我少了 2 个文件：

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

我想将 style1.less 导入 style2.less

样式2.less：

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

使用：cssrewrite 文件管理器，lessphp

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

于 2013-04-15T12:56:27.663 回答
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 的树枝文件中（在我的情况下为 /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 资产：安装 --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:
                 load_paths:
                      - "/usr/bin/compass"
                      - "%kernel.root_dir%/../src/Acme/MyBundle/Resources/public/css/"
于 2016-04-02T09:18:17.267 回答