Sass - Prefix all classes imported from file (with sass import or webpack loader)

Question

This question might be pretty stupid and duplicit, but I can't find a working solution to my problem. I'm sorry if this has already been answered somewhere else.

What I'm trying to do is to use 2 css frameworks in one project.

I have to use semantic as my main css framework - this has to be globally accessible. For example element with class "ui grid" should use semanticUI's "ui grid" behaviour.

But then, I want to use Bulma, as my secondary framework. To avoid conflicts, I want to prefix all Bulma classes with a static prefix. So for example Bulma's "modal" class will be accessible as "bulma-modal". something like this:

  .&bulma {
    @import '~bulma/bulma';
  }

This would (hopefully) avoid all class conflicts and still let me use both semantic and Bulma in the same scope.

Thanks for any help or suggestion.

Answer 1

This framework may be of interest to you https://github.com/Glidias/v-namespace

In combination with using sass:meta to import the stylesheet from node modules in a way which allows it to be nested in the selector hierarchy.

@use "sass:meta";
.bulma {
    @include meta.load-css("../node_modules/bulma/sass/helpers/flexbox.sass");
}