Easyadminbundle: How to integrate with Webpack Encore or how to use the full Bootstrap framework

[longnd]

I want to customize the backend by using Bootstrap. I did read the official EasyAdminBundle document which says:

you can use the bootstrap-all.css and bootstrap-all.js files provided by EasyAdmin which contains all the Bootstrap parts not included by default by the backend
easy_admin: # ... design: assets: css: # ... - @'bundles/easyadmin/bootstrap-all.css'
I did that, but the bootstrap-all.css seems missing some bootstrap 4 styles (the document says that EasyAdmin was built on bootstrap 4), example the col-sm.

You can search in the compiled file which shows no results:
https://github.com/EasyCorp/EasyAdminBundle/blob/master/src/Resources/public/app.css

https://github.com/EasyCorp/EasyAdminBundle/blob/master/src/Resources/public/bootstrap-all.css

I though maybe I need to rebuild that file, the document also says

if you want total control over the backend styles, you can use Webpack to integrate the SCSS and JavaScript source files provided in the assets/ directory

but doesn't give a clear instruction on how to do that

@javiereguiluz also mentioned that in a comment but again, I can't figure out how to do that. Maybe you can please give some more instruction in the document?

And again, please let me know how to utilize the full bootstrap framework.
Thanks!

[bahadirarslan]

I agree with you, the documents don't tell enough for using webpack or assets.
like you i stuck with react and i couldn't continue. i checked every issue about asset or webpack but non of them contains usable information.

but doesn't give a clear instruction on how to do that

[gonzaloalonsod]

The bundles / easyadmin / bootstrap-all.css file does not contain all the required classes: ol-sm-12 or col-md-12
For now include the necessary styles of boostrap in another css file.
I wait if there is a better way to do it.
Thank you

[javiereguiluz]

I'm going to take a look into this. Please, be patient 🙏

[gonzaloalonsod]

@gonzakpo Those classes were removed on Bootstrap 4. I found a thread about it on stack overflow. Anyways I merge easyadmin assets with my own assets. I extend the layout.html.twig to include my assets. Here is my package.json and my webpack.config.js:

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.26.0",
    "bootstrap": "^4.1.0",
    "bootstrap-rtl": "^3.3.4",
    "copy-webpack-plugin": "^4.5.2",
    "cssnano": "^4.1.10",
    "featherlight": "^1.7.13",
    "font-awesome": "4.7.0",
    "jquery": "^3.3.1",
    "jquery-highlight": "^3.4.0",
    "jquery.are-you-sure": "^1.9.0",
    "node-sass": "^4.9.4",
    "popper.js": "^1.14.5",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "select2": "4.0.6",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "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"
  }
}

let Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
    .setOutputPath('./public/assets')
    .setPublicPath('/assets')

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSassLoader()
    // .enableSourceMaps(!Encore.isProduction())
    .enableSourceMaps(false)
    // .enableVersioning(Encore.isProduction())
    .enableVersioning(false)
    .disableSingleRuntimeChunk()
    // .enableSingleRuntimeChunk()
    // .splitEntryChunks()
    .autoProvidejQuery()

    // needed to avoid this bug: https://github.com/symfony/webpack-encore/issues/436
    // .configureCssLoader(options => { options.minimize = false; })
    .enablePostCssLoader()

// copy select2 i18n files
    .copyFiles({
        from: './node_modules/select2/dist/js/i18n/',
        // relative to the output dir
        to: 'select2/i18n/[name].[ext]',
        // only copy files matching this pattern
        pattern: /\.js$/
    })

    .addPlugin(
        new CopyWebpackPlugin([
            // default user profile picture
            { from: './assets/images/343c80_828690_3033978.jpg', to: '../upload/images/user_profile' },
            { from: './assets/images/logo_drk.png', to: 'images/logo_drk.png' },
            { from: './assets/images/logo_slv.png', to: 'images/logo_slv.png' }
        ])
    )

    .addEntry('app', [
        './assets/js/app.js',
        './public/bundles/easyadmin/app.js'
    ])



    // enables @babel/preset-env polyfills
    // .configureBabel(() => {}, {
    //     useBuiltIns: 'usage',
    //     corejs: 3
    // })

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

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

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

;

module.exports = Encore.getWebpackConfig();

https://getbootstrap.com/docs/4.3/layout/grid/

[rernesto]

@gonzakpo On boostrap 4 col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
Not the one you talked about, my bad. Anyways you can merge your own classes or your favorite Bootstrap 4 release and compile your own assets with webpack. Just add the easyadmin files one by one instead of the full easyadmin compiled version.
Dropping my previous comment cuz you copy & paste ;).

[javiereguiluz]

I'm closing this as "fixed":

• In the latest versions of this bundle, the entire Bootstrap framework is loaded in all pages: https://symfony.com/doc/master/bundles/EasyAdminBundle/book/design-configuration.html#loading-the-entire-bootstrap-framework
• We use Webpack Encore to build the assets and we provide the sources, so you can add them to your own asset building pipeline: https://symfony.com/doc/master/bundles/EasyAdminBundle/book/design-configuration.html#managing-the-backend-assets-with-webpack