Published on

TYPO3, Bootstrap 4 & Webpack

Authors

This note outlines a minimal setup to use Bootstrap 4 with TYPO3 and bundle assets via Webpack in your site package.

1) Project structure

packages/site_package/
  Resources/
    Private/
      Layouts/
      Partials/
      Templates/
    Public/
      Assets/
        css/
        js/
  Build/
    package.json
    webpack.config.js
    src/
      js/app.js
      scss/app.scss

2) Install frontend deps

npm init -y
npm i -D webpack webpack-cli css-loader sass sass-loader mini-css-extract-plugin postcss postcss-loader autoprefixer
npm i bootstrap@4.6.2 @popperjs/core

3) Webpack config

Build/webpack.config.js:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: process.env.NODE_ENV || 'development',
  entry: {
    app: path.resolve(__dirname, 'src/js/app.js'),
  },
  output: {
    path: path.resolve(__dirname, '../packages/site_package/Resources/Public/Assets'),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].css' })],
  devtool: 'source-map',
}

Build/postcss.config.js:

module.exports = { plugins: [require('autoprefixer')] }

4) Entry files

Build/src/js/app.js:

import 'bootstrap'
import '../scss/app.scss'

Build/src/scss/app.scss:

@import "bootstrap/scss/bootstrap";
// your additional styles

5) Build

NODE_ENV=production npx webpack
# output in packages/site_package/Resources/Public/Assets

6) Integrate in TYPO3 (Fluid)

In your base layout:

<f:asset.css
  identifier="app-css"
  href="{f:uri.resource(path: 'Assets/css/app.css', extensionName: 'SitePackage')}"
/>
<f:asset.script
  identifier="app-js"
  src="{f:uri.resource(path: 'Assets/js/app.js', extensionName: 'SitePackage')}"
/>

Alternatively include tags directly or use AssetCollector depending on your TYPO3 version.

Notes

  • Consider versioning/fingerprints for long‑term caching in production.
  • Split multiple entries if you need separate bundles (frontend/backend).
  • For Bootstrap JS components ensure Popper is available (imported via bootstrap package).