Symfony 4 - Webpack Encore bootstrap css not in output

Question

I am trying to introduce Webpack Encore into my Symfony 4 app to manage the JS & CSS assets.

I installed yarn and nodejs.

Then composer require encore and then yarn install.

I have the app.js file in assets/js/.

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you require will output into a single css file (app.css in this case)
require('bootstrap');
require('../css/app.css');

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');

console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

Installed bootstrap and other dependencies with yarn:

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "bootstrap": "^4.3.1",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.7",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

Then run yarn encore dev --watch

Problem

I do not get any bootstrap css in my public/build/app.css.

Do I need anything more than require('bootstrap'); in webpack.config.js?

Answer 1

If you go to the node_modules directory, look for bootstrap and open its package.json you'll find the entry:

"main": "dist/js/bootstrap",

When you do:

require("bootstrap");

in your file you require the file(s) specified in the section main of the library's package.json.
You can however require any file from the library by specifying its (relative) path:

require("bootstrap/dist/css/bootstrap.css");

Now you can run:

yarn encore dev

and the Bootstrap CSS should be in your app.css.

EDIT (2019-03-05):
Here is the relevant block code of the screencast 7. Require CSS!?, part of the SymfonyCasts Course Webpack Encore: A Party for your Assets Tutorial.

UPDATE (2019-11-25):
This answer explains how to bind (import) a CSS library installed with yarn (or npm) using the require function provided by Node.js.

ECMAScript 2015 (also known as ES6) introduces new feature import. Its usage is explained in the answer from WhiteRabbit.

Beside these two options, there is also a third possibility to import Bootstrap and that is by using @import directly in your own CSS file:

@import 'bootstrap';

This applies only when using Webpack and Yarn (or NPM). Webpack Encore is able to resolve the path and import the correspondent CSS file.

Answer 2

According to the documentation bootstrap in webpack encore

In the webpack.config.js you can have

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

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 you JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')

    .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 Sass/SCSS support
    // .enableSassLoader()

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

    // 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 you install jquery, popper.js, bootstrap, font-awesome with this following command (if you are using npm and if you need font-awesome) :

npm install jquery --save-dev
npm install popper.js --save-dev
npm install bootstrap@4 --save-dev
npm install font-awesome --save-dev

In app.js, you can have :

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
import 'popper.js';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';

$(document).ready(function(){
    // Put your jquery code here.
});

In your template, you can do :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        {{ encore_entry_link_tags('app') }}  
    </head>
    <body>
         <div id="content_container"></div>

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

You can build and watch. In your project directory, you can do :

./node_modules/.bin/encore dev --watch

Answer 3

Basicaly what cezar said, but I put it in an answer since a comment would make it unreadable:

import 'bootstrap';  // js-file
import 'bootstrap/dist/css/bootstrap.css'; // css file

Not 100% sure but I think you also need to import Popper and Jquery manually:

import Popper from 'popper.js';
import $ from 'jquery';