How to optimize Bootstrap 5.2 with sage 10

sage
,
1

Currently I’ve installed sage 10 for the first time.
yes, we were still on 9.0.10 :see_no_evil:

We always using Bootstrap for our projects, but we are optimizing bootstrap, so we do not use all the functions. But when I want to use a stripped version, my process cannot find the files anymore.

I’ve installed it based on the documentation (https://docs.roots.io/sage/10.x/css-frameworks/. Default this builds great and out of the box.

But when I use a stripped version, it is not able to find the bootstrap files. What am I doing wrong?
Bootstrap optimization docs https://getbootstrap.com/docs/5.2/customize/optimize/

// Does not work
@import "../../node_modules/bootstrap/scss/bootstrap"
@import "../../node_modules/bootstrap/scss/variables"
@import "bootstrap/scss/bootstrap"
//etc etc etc

// Does work
@import "bootstrap"

When importing default bootstrap, my CSS file is around 200kb out of the box, and this can be much more efficient.

Maybe another way would be implementing PurgeCSS? But I’m not that familiar with bud and webpack on how to implement this, any help on this would be very welcome also :wink:

2

You were dang close!

The first two lines look correct but are fragile because of the relative imports:

@import "../../node_modules/bootstrap/scss/bootstrap"
@import "../../node_modules/bootstrap/scss/variables"

But your third line would work and is correct:

@import "bootstrap/scss/bootstrap"

The full config referenced in the bootstrap docs would look like this:

// Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/placeholders";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

In the future please post the error message you received. It helps me help you more efficiently, and other users might search for it.

This is the build error I received when I intentionally goofed this import:

✘  sage ./public [f45ae00a7c4c98949300]
│
├─ ✘ error
│ SassError: SassError: Can't find stylesheet to import.
│    ╷
│ 14 │ @import "../node_modules/bootstrap/scss/breadcrumb";
│    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│    ╵
│   resources/styles/app.scss 14:9  root stylesheet
│
├─ ✘ error
│ HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
│ SassError: Can't find stylesheet to import.
│    ╷
│ 14 │ @import "../node_modules/bootstrap/scss/breadcrumb";
│    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│    ╵
│   resources/styles/app.scss 14:9  root stylesheet
│ -- inner error --
│ Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
│ SassError: Can't find stylesheet to import.
│    ╷
│ 14 │ @import "../node_modules/bootstrap/scss/breadcrumb";
│    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│    ╵
3

The above line gives me the following error:

ERROR in ./resources/styles/app.css (./node_modules/css-loader/dist/cjs.js??css!./node_modules/postcss-loader/dist/cjs.js??postcss!./resources/styles/app.css)
  Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
  Error: Failed to find 'bootstrap/scss/bootstrap'
    in [
      /Users/~~~/Local Sites/website/app/bedrock/web/app/themes/themename/resources/styles
    ]
      at  /Users/~~~/Local Sites/website/app/bedrock/web/app/themes/themename/node_modules/postcss-import/lib/resolve-id.js:35:13
      at async LazyResult.runAsync ( /Users/~~~/Local Sites/website/app/bedrock/web/app/themes/themename/node_modules/postcss/lib/lazy-result.js:396:11)
      at async Object.loader ( /Users/~~~/Local Sites/website/app/bedrock/web/app/themes/themename/node_modules/postcss-loader/dist/index.js:95:14)
   @ ./resources/styles/app.css 8:6-160 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-130 83:0-130 84:22-29 84:33-47 84:50-64 61:4-74:5

  sage compiled with 1 error
✘  sage ./public [89ea1392e13c593e688e]
│
├─ ✘ error
│ Error: Failed to find 'bootstrap/scss/bootstrap'
│   in [
│     ./resources/styles
│   ]
│
├─ entrypoints
│ ├─ app
│ │ ├─ js/app.js                                    201.4 kB
│ │ └─ app.a31f0a7a5fb0a677091c.hot-update.js      865 bytes
│ └─ editor
│   ├─ js/editor.js                                205.78 kB
│   └─ editor.a31f0a7a5fb0a677091c.hot-update.js   868 bytes
│
├─ assets
│
└─ compiled 114 modules in 125ms
4

Did you rename app.css to app.scss yet? From the docs:

image
image1566×282 26.8 KB

5

jeezz, I missed that one. I think it was to late already :sweat_smile: