web-dev-qa-db-ja.com

symfonyアプリにbootstrapを追加する正しい方法は何ですか？

私はsymfonyフレームワーク3を使用してWebアプリケーションを開発しています。アプリケーションにboostrapの機能を追加する必要があります。以下のコマンドを使用してbootstrapをインストールしました。（composerを使用しています。）

composer require twbs/bootstrap

bootstrap=アプリケーションのベンダーフォルダーにインストールされます。具体的にはvendor\twbs\bootstrap。

アプリケーションのtwigテンプレート（app\Resources\viewsにあります）]に、ブートストラップのcssおよびjsファイルをアセットとして添付する必要があります。

例えば。：

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" />

ただし、アセットはWeb（web\bundles\framework）フォルダーにあるファイルでのみ機能します。これらの.cssおよび.jsファイルをベンダーフォルダーからWebフォルダーに手動でコピーしてこの作業を行うことができますが、適切な方法が必要です（つまり、アセットを追加するため）。例：bin/console？を含むコマンド

どんな助けも大歓迎です。

twitter-bootstraptwigcomposer-phpsymfony
11
Wickramaranga

Symfony Best Practiesはこの問題に対する答えを提供します： http://symfony.com/doc/current/best_practices/web-assets.html

このようなアプリケーションを開発している場合、BowerやGruntJSなど、テクノロジーが推奨するツールを使用する必要があります。 Symfonyバックエンドとは別にフロントエンドアプリケーションを開発する必要があります（必要に応じてリポジトリを分離することもできます）。

このプロジェクトでは、gruntを使用してこれらのファイルを構築し、webフォルダーに連結します。

6
fucethebads

これはSymfony3ではもう機能しないようです。

Symfony3では、以下が機能するはずです。

twig:
    form_themes: ['bootstrap_3_layout.html.twig']
8
Twoez

推奨されるアプローチ 変更 Symfonyバージョン4：以降、CSSとJavaScriptリソースをバンドルするためにnpm/yarnでWebpack Encoreが使用されます。ここでBootstrapフレームワークを含めることができます。

Encoreのインストール で開始し、 Bootstrap固有のドキュメント を続けます。要約すると、次のコマンドを実行する必要があります。

composer require symfony/webpack-encore-bundle
yarn install
yarn add bootstrap --dev

# after making the required changes to webpack.config.js, app.js, run Encore
yarn encore dev --watch
4
Siavas

Symfony v2.6には、Bootstrap 3公式ドキュメント 向けに設計された新しいフォームテーマが含まれているため

# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']
3
Roger Guasch

このリンクから https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles （および変更Twitterfor twbs）これは、私のconfig.ymlにあるものです：

assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~
        jsqueeze: ~
        scssphp:
            formatter: 'Leafo\ScssPhp\Formatter\Compressed'
    assets:
        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/components/jquery/jquery.js
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css
            filters: [ cssrewrite ]
        bootstrap_glyphicons_ttf:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
            output: "fonts/glyphicons-halflings-regular.ttf"
        bootstrap_glyphicons_eot:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
            output: "fonts/glyphicons-halflings-regular.eot"
        bootstrap_glyphicons_svg:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
            output: "fonts/glyphicons-halflings-regular.svg"
        bootstrap_glyphicons_woff:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
            output: "fonts/glyphicons-halflings-regular.woff"

composer.jsonには、たとえばjsqueezeやLeafoのscssプロセッサーなど、jqueryなどの他の依存関係があります。 composerファイルにこれがあります：

    "components/font-awesome": "^4.7",
    "components/jquery": "^3.1"
    "leafo/scssphp": "^0.6.7",
    "patchwork/jsqueeze": "^2.0",
    "symfony/assetic-bundle": "^2.8",
    "twbs/bootstrap": "^3.3",

次に、CSSに次のように使用します。

{% stylesheets
    '@bootstrap_css'
    'my/other/scss_file1.scss'
    'my/other/scss_file2.scss'

    filter='scssphp,cssrewrite'
    output='css/HelloTrip.css' %}

    <link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>

{% endstylesheets %}

javaScriptの場合は、jqueryを最初に配置します。

{% javascripts
    '@jquery'
    '@bootstrap_js'
    'my/other/js_file1.js'
    'my/other/js_file2.js'

    filter='?jsqueeze'
    output='js/HelloTrip.js' %}

    <script src="{{ asset_url }}"></script>

{% endjavascripts %}

次に、bin/console assetic:dumpを使用して、すべてのアセットをコンパイルします。

助けて欲しい！

3
Xavi Montero

代替ソリューションとして、パッケージの更新時にシンボリックリンクを自動的に作成できます。たとえば、composer.jsonで"post-update-cmd"に新しいコマンドを追加します。

// ...
"scripts": {
        "post-install-cmd": [
            "@symfony-scripts"
        ],
        "post-update-cmd": [
            "@symfony-scripts",
            "rm web/bootstrap && ln -s -r `pwd`/vendor/twbs/bootstrap/dist/ web/bootstrap"
        ]
    },
1
slava