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

css, import, prefix, sass

Solution

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");
}

Problem

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.

Original source