CODEWITHSUNDEEP
symfonywebpackbootstrap-4webpack-encoresymfony5
Bevelopper
Bevelopper

Reputation: 75

Learning Symfony 5 and having trouble with Bootstrap integration via Webpack and Encore and having weird issues with the CSS

Here I am, going back to Symfony after leaving it for the past few years. Now it's using Webpack when it used to Assetic last time I touched it. So, I am a bit confused with a lot of things related to the rapidly evolving JavaScript ecosystem.

I went to Sensiolabs's website to follow instructions on how to integrate Bootstrap to my project. I went pretty far in the process as I have a link to my stylesheet on my webpage : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog index!</title>
            <link rel="stylesheet" href="/build/app.css">
    </head>
<body class="bg-light">

When I use the path for the css as an url : http://localhost/symfony-01/public/build/app.css I'm getting all the styles displayed (correctly, I assume). However, I am not getting any styling at all in the html. At first I thought I hadn't generated the build with webapp correctly but it's not the case.

So I added some silly element to the twig template and gave it a silly css as to make sure style was not overloaded or something: in base.html.twig:

<div class="superfuzz"> HELLO GUYS</div>

And in app.css :

div.superfuzz{
    background-color: green !important;
}

When I look at the css I get from url above, I can go down and find that style wasindeed added By Encore. Yet style in inspector is empty, it's not applied. I dont know why, it's a total mystery to me. The only idea I have would be that the link to the stylesheet is not correct but at the same time I am pretty new with webpack, Encore, and Yarn.

Could also mean the style in the css file is not correct. I haven't done that much SCSS to really spot if something wrong but normally webpack is converting it in correct css right?

Here is the twig version of my html header, just in case :

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

Here is my webpack.config.js :

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', [
        './assets/js/app.js',
        './node_modules/jquery/dist/jquery.slim.js',
        './node_modules/popper.js/dist/popper.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.js'])

    // .addStyleEntry('css/app', [
    //     './node_modules/bootstrap/dist/css/bootstrap.css',
    //    './assets/css/app.css'
    // ])

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableSassLoader()

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

And let me add assets/js/app.js:

import '../css/global.scss';
import '../css/app.css';

// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';

const $ = require('jquery');
global.$ = global.jQuery = $;

And scss file:

@import "~bootstrap/scss/bootstrap";

Content of the entrypoints.json file: 

{
  "entrypoints": {
    "app": {
      "js": [
        "/build/runtime.js",
        "/build/vendors~app.js",
        "/build/app.js"
      ],
      "css": [
        "/build/app.css"
      ]
    }
  }
}

Upvotes: 0

Views: 3861

Answers (2)

hacknull
hacknull

Reputation: 415

Try to clear the cache when you have changed something. I had the similar problem with this files. Symfony couldn't find this files:

http://localhost/build/runtime.js
http://localhost/build/vendors~app.js
http://localhost/build/app.js

The problem had disappeared after this:

bin/console cache:clear; npm run watch

Upvotes: 0

Bevelopper
Bevelopper

Reputation: 75

Ok the generated link href path was incorrect. Thanks to @Julien B. for providing the solution.

As I am not using a virtualhost yet, my URL is following the localhost/projetfolder/public format. I had too much trust in Encore handling this right off the bat but actually I had to edit the parameter to the setPublicPath method in webpack.config.js to reflect my situation. So it must be .setPublicPath('/projectfolder/public/build') instead of .setPublicPath('/build')

Upvotes: 0

Related Questions