Slow compiling with Bootstrap


I’m noticing a significant difference in compile time between Laravel Mix & Bud (in development mode).

A change in a scss file:
Laravel mix: 3.8s
Bud: 5.9s

Both times, I’m importing all bootstrap files in both app.scss & editor.scss. Is there any way I can speed up this compile time?

 * @typedef {import('@roots/bud').Bud} bud
 * @param {bud} app
module.exports = async (app) => {
     * Application entrypoints
     * Paths are relative to your resources directory
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],

    .when(app.isProduction, app => {
        enabled: false,
        content: [
          app.path('project', 'resources/views/**/*.blade.php'),
          app.path('project', 'app/**/*.php'),
          app.path('project', 'index.php'),
        safelist: require('purgecss-with-wordpress').safelist.concat(require('./purge-safelist').safelist),

     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.

     * These files will trigger a full page reload
     * when modified.
    .watch('resources/views/**/*', 'app/**/*')

     * Target URL to be proxied by the dev server.
     * This is your local dev server.
"devDependencies": {
    "@roots/bud": "5.5.0",
    "@roots/bud-eslint": "5.5.0",
    "@roots/bud-postcss": "5.5.0",
    "@roots/bud-prettier": "5.5.0",
    "@roots/bud-purgecss": "5.5.0",
    "@roots/bud-sass": "5.5.0",
    "@roots/bud-stylelint": "5.5.0",
    "@roots/eslint-config": "5.5.0",
    "@roots/sage": "5.5.0",
    "purgecss-with-wordpress": "^4.1.0",
    "stylelint-config-idiomatic-order": "^8.1.0",
    "stylelint-order": "^5.0.0"
  "dependencies": {
    "bootstrap": "^5.1.3"

Thanks for your Bud config and packages… but we have no comparison. Where is your Mix config?

My bad, here it is:

const mix = require('laravel-mix');
const path = require('path');

 | Mix Asset Management
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.


  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
    extend: { content: [path.join(__dirname, 'index.php')] },
    safelist: require('purgecss-with-wordpress').safelist.concat(require('./purge-safelist').safelist),
    processCssUrls: false,

  .js('resources/scripts/app.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })

  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');


Doesn’t look like you’re doing any sort of linting? If you remove all of the linting from your theme (example), what change does that have on your build times?

I tested without linting, there might be a small difference, but it is not noticable. If you would like to investigate this a little further, I created a branch which contain both ways to compile.

You can just clone the branch, run yarn & switch between mix & bud (see

Thank you for the repo :pray:

On my machine, the Bud build completes in ~3.5s and the Mix build completes in ~7.5s pretty consistently :confused:

Running yarn build is indeed faster with bud (2.35s) vs mix (4.03s). I’m talking about development (yarn dev & yarn dev-mix), and how fast the changes are reflected in my browser.

:man_facepalming: We’ll try and take a look soon