Sass - Префикс всех классов, импортированных из файла (с загрузчиком sass или загрузчиком webpack)

Question

Этот вопрос может быть довольно глупым и дублированным, но я не могу найти рабочего решения для своей проблемы. Извините, если на это уже ответили где-то в другом месте.

Что я пытаюсь сделать, так это использовать 2 рамки CSS в одном проекте.

Я должен использовать семантику в качестве основной рамки css - это должно быть доступно на глобальном уровне. Например, элемент с классом «ui grid» должен использовать поведение «ui grid» в semanticUI.

Но тогда я хочу использовать Бульму, как мою вторичную структуру. Чтобы избежать конфликтов, я хочу префикс всех классов Bulma статическим префиксом. Так, например, «модальный» класс Бульмы будет доступен как «bulma-modal». что-то вроде этого:

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

Это (надеюсь) избежать всех конфликты класса и до сих пор позволяет мне использовать как смысловой и Бульм в той же области.

Спасибо за любую помощь или предложение.

Answer 1

попробовать, как это в вашем Бульме файлах SCSS

$my-name: mycss--; 

.#{$my-name}btn { 
    ... 
} 

.#{$my-name}input { 
    ... 
} 

.#{$my-name}header { 
    ... 
}