К примеру пишу я "калькулятор" на Vue... сверстал используя scoped опцию, скомпилил и получил js и css.
<style lang="scss" scoped>
#calc {
.какой_то_элемент {
color: red;
}
}
</style>
С моей стороны все идеально и калькулятор не конфликтен (или нет ?), но нужно добавить этот калькулятор на сайт где в глобальных стилях под этот же класс (возможно не сейчас, а в будущем) прописаны другие свойства и верстка поедет (к примеру если это калькулятор на wordpress где можно менять темы и у каждой темы свои глобальные классы).
//...где то в глобальных стилях
.какой_то_элемент { //с совершенно другим замыслом
position: fixed;
width: 20px;
height: 20px;
top: 4px:
right: 4px;
}
В целом проблема с названием одинаковых классов и по идее добавление префиксов должно решить ее (возможно существует какой то плагин под webpack для этого или другое решение).
Средний
Простой
