Symfony 2他のバンドルからLESSファイルをインポートする方法

Question

LESSには、他のLESSファイルを@importする権限があります。この質問は、LESSファイル内のLESSファイルをSymfonyプロジェクトの別のバンドルからインポートするソリューションを見つけることを目的としています。

私はSymfony2プロジェクトでLESSとAsseticを使用して変更を見ています。私のLESSファイルは、他のLESSファイルをインポートすることができますが、同じバンドル内にある場合にのみインポートできます。

別のバンドルからインポートしようとすると、Assetic watchはインポートが失敗するため、エラー "variable undefined"で停止します。別のバンドルで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コンパイルプロセスがバンドル間でこれをうまくやっていないためです。

Answer 1

web/bundles dirのパスを使用する必要があると思います。

私は、ファイルをこのようにインポートしています：

私は2つの以下のファイルがあります：

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

を私はstyle2.lessにstyle1.lessをインポートしたいです

style2.less：

使用

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

：cssrewriteファイラーを、

も、実際、公的にアクセス可能なパスを使用してLESSファイルを参照するために覚えてlessphp：ここ 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は私にインポートするすべての宣言を持つファイルであるとしましょう他のバンドル（私の場合、私は草を使用しますが、それは少ないです）。 /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss私がやるで

：

@import "../../../../MyBundle/Resources/public/css/main"; 

これは、ファイルの古典的な物理的な場所を参照してくださいので、あなたのIDEがしますそれを見つける。

ここで興味深い部分です。すべてのscssファイルをコンパイル、縮小、名前変更して1つのCSSファイルにしたいと考えています。 Asseticsでこれを行うことができます。

あなたのCSS（私の場合は/app/Ressources/views/css.html.twig）を読み込む場所にある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 %} 

==>ここでは、/ウェブディレクトリからファイルを参照する必要が（そう「バンドル/ acmemybundleを..」使用して構文が。あなたはシンボリックリンクモードで資産をインストールする必要があります。（PHPアプリ/コンソール資産：==>あなたはWebディレクトリにとどまるので、あなたが出力filemaneと場所で好きな置くことができる）

を--symlinkインストールfinaly

そして、あなたの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/"