title: Learning Symfony 5 and having trouble with Bootstrap integration via Webpack and Encore and having weird issues with the CSS
body: <p>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.</p>
  
  <p>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 : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Blog index!&lt;/title&gt;
              &lt;link rel="stylesheet" href="/build/app.css"&gt;
      &lt;/head&gt;
  &lt;body class="bg-light"&gt;
  </code></pre>
  
  <p>When I use the path for the css as an url : <a href="http://localhost/symfony-01/public/build/app.css" rel="nofollow noreferrer">http://localhost/symfony-01/public/build/app.css</a>
  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. </p>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="superfuzz"&gt; HELLO GUYS&lt;/div&gt;
  </code></pre>
  
  <p>And in app.css :</p>
  
  <pre><code>div.superfuzz{
      background-color: green !important;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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? </p>
  
  <p>Here is the twig version of my html header, just in case :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;{% block title %}Welcome!{% endblock %}&lt;/title&gt;
      {% block stylesheets %}
          {{ encore_entry_link_tags('app') }}
      {% endblock %}
  &lt;/head&gt;
  &lt;body class="bg-light"&gt;
  </code></pre>
  
  <p>Here is my webpack.config.js :</p>
  
  <pre><code>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 &amp; 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) =&gt; {
          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 &amp; 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();
  </code></pre>
  
  <p>And let me add assets/js/app.js:</p>
  
  <pre><code>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 = $;
  </code></pre>
  
  <p>And scss file:</p>
  
  <pre><code>@import "~bootstrap/scss/bootstrap";
  </code></pre>
  
  <p>Content of the entrypoints.json file: </p>
  
  <pre><code>{
    "entrypoints": {
      "app": {
        "js": [
          "/build/runtime.js",
          "/build/vendors~app.js",
          "/build/app.js"
        ],
        "css": [
          "/build/app.css"
        ]
      }
    }
  }
  </code></pre>