Home > Blockchain >  Bootstrap 5.2 not available
Bootstrap 5.2 not available

Time:09-02

A new project in Symfony 6.1.4 does not (yet) take advantage of Bootstrap 5.2. (For example, columns are not created in rendered template.) I've compared the project's configuration with an existing, working 6.1 project and haven't found any significant differences. Given the following setup, what needs to change?

app.js:

import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

const $ = require('jquery');

require('bootstrap');

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();

    $('.js-datepicker').datepicker({
        format: 'yyyy-mm-dd'
    });
});

styles/app.scss

@import "~bootstrap/scss/bootstrap"

webpack.config.js

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')

    .enableStimulusBridge('./assets/controllers.json')

    .splitEntryChunks()

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    .enableSassLoader()
;

module.exports = Encore.getWebpackConfig();

yarn dev

5 files written to public\build
Entrypoint app [big] 2.56 MiB = runtime.js 14.6 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_bootstrap_dist_js_boo-43ff9a.js 1.88 MiB app.css 668 KiB app.js 20.2 KiB
webpack compiled successfully

base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        <div >
            {% block body %}{% endblock %}
        </div>
    </body>
</html>

default.html.twig

{% extends 'base.html.twig' %}
{% block body %}
    <div >
        <div >Column 1</div>
        <div >Column 2</div>
    </div>
{% endblock %}

rendered template

Column 1
Column 2

CodePudding user response:

As it turns out, the above configuration is just fine. The problem arose in an improper configuration of an apache vhost. When I switched to symfony server:start the page was rendered as expected.

Learn something new everyday.

  • Related