2013-02-22 66 views
6

LESS有权@import其他LESS文件。这个问题的目的是找到一个解决方案,在Symfony项目中从另一个Bundle的LESS文件中导入LESS文件。Symfony 2如何从另一个软件包导入LESS文件

我正在研究Symfony2项目,使用LESS和Assetic观察更改。我的LESS文件能够导入其他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编译过程在捆绑包之间做得不好。

任何想法的人?

+0

是不是也是一个选项供您使用assetic到少合并文件,而不是导入它们的彼此内ffrom? – 2013-02-22 15:43:02

+1

不太可能。我需要引入其他LESS文件来扩展他人的行为,而我开发的可能性。 – 2013-02-22 16:51:06

+1

看看过滤器定义,似乎没有办法通过任何自定义路径(搜索包含)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 2013-02-22 17:23:45

回答

5

我认为你必须使用web/bundles dir中的路径。

我正在导入文件是这样的:

我有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

还记得用自己的实际,公开访问的路径是指在减档: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

+0

Works的手写过滤(STYL文件)了。 – 2015-10-13 09:19:30

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,但它与少量相同)。

/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目录(因此使用参考文件“包/ acmemybundle ..”语法,你需要安装在资产符号链接模式。(PHP应用程序/控制台资产:在您的conf.yml安装--symlink)

==>你可以把任何你想要的输出filemane和位置,因为你在web目录留

而且finaly

# 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/" 
相关问题