[SOLVED] How to create conditional styling for Bulma CSS, similar to Pico CSS, without losing Bulma's design?

How to create conditional styling for Bulma CSS, similar to Pico CSS, without losing Bulma's design?

I'm trying to implement conditional styling for Bulma CSS, similar to how Pico CSS handles it (https://picocss.com/docs/conditional). My goal is to scope Bulma styles to elements with a specific class, allowing me to use both Pico CSS and Bulma in the same project without conflicts.

However, when I implement this scoping, the resulting CSS doesn't match the original Bulma design. The colors are missing, and the overall theme is off.

Here's what I've tried:

Created a custom Sass file (custom-bulma.scss) to import Bulma components and wrap them in a .bulma class:

.bulma {
  @use "node_modules/bulma/bulma";
}

Compiled this Sass file to CSS and included it in my HTML after Pico CSS:

<!--link rel="stylesheet" href="path/to/pico.min.css"-->
<link rel="stylesheet" href="path/to/custom-bulma.css">

Wrapped Bulma-styled elements in a container with the .bulma class:

<div class="bulma">
  <!-- Bulma-styled elements here -->
</div>

Despite these attempts, the output CSS doesn't match the original bulma.min.css in terms of design and theming. Colors are missing, and the overall look is off.

What am I missing? How can I scope Bulma styles to a specific class without losing its original design and theme?

Any help or insights would be greatly appreciated!

Solution