6

LESS には、他の LESS ファイルを @import する機能があります。この質問は、Symfony プロジェクトの別のバンドルから 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 コンパイル プロセスがバンドル間でこれをうまく実行しないため、それらは機能しません。

アイデアはありますか？

4

2 に答える 2

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

また、公開されている実際のパスを使用して LESS ファイルを参照することも忘れないで ください。

于 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 ファイルを 1 つの 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 %}

==> ここでは、/web ディレクトリからファイルを参照する必要があります (したがって、'bundles/acmemybundle..' 構文を使用します。シンボリック リンク モードでアセットをインストールする必要があります。(php app/console asset:install --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

ここで重要な部分は、コンパスの load_paths です。基本的なセットアップでは、コンパスがあります: ~ 次のように変更する必要があります:

  compass:
                 load_paths:
                      - "/usr/bin/compass"
                      - "%kernel.root_dir%/../src/Acme/MyBundle/Resources/public/css/"
于 2016-04-02T09:18:17.267 に答える