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监视/ LESS编译过程在捆绑包之间做得不好。

任何想法？

Answer 1

我认为你必须使用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 filer，lessphp

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

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的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 %}

==＆GT;在这里你必须从/ web目录中引用该文件（所以使用'bundles / acmemybundle ..'语法。你需要以符号链接模式安装资产。（php app / console asset：install --symlink）

==＆GT;你可以把你想要的任何东西放在输出文件和位置，因为你留在网页目录。

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

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

2 个答案: