Можно ли настроить автопрфикс для имён классов во vue-loader?

Question

[Александр]

У меня названия всех классов в компоненте начинается с его названия. Например:

<div class="component-name">
   <div class="component-name-element-name"></div>
   <div class="component-name-another-element-name"></div>
</div>

Есть ли какой-нибудь автопрефиксер для того чтобы не прописывать каждый раз довольно длинное название компонента?

Answer 1

[Дмитрий Беляев]

<template>
<div :class="$style.component">
   <div :class="$style.element"></div>
   <div :class="$style['another-element']"></div>
</div>
</template>

<style module>
.component {}
.element {}
.another-element {}
</style>

module, в отличии от scoped, меняет имена классов на уникальный хэш, и выкидывает его в объект vm.$style
селекторы получаются мега легковестные

Comments

[Александр]

Хм, очень интересно, почему-то раньше об этом не слышал, спасибо.

[Александр]

Хотя я сейчас подумываю сделать что-нибудь вроде глобального миксина с функцией с коротким названием, которая будет брать название компонента и добавлять к нему то что в неё передали, по идее это сохранит мою текущую структуру классов.

[Дмитрий Беляев]

LordGuard, эту фишку собственно дает не сам vue, а vue-loader к webpack'у
https://vue-loader.vuejs.org/ru/features/css-modul...
но Вы ведь все равно .vue файлы вебпаком собираете ))

[Александр]

Дмитрий Беляев, ну я вроде как читал доку vue-loader, но как-то умудрился пропустить модули, ну или просто не запали они мне в память. В любом случае спасибо)

Answer 2

[Артур Борденюк]

Можно использовать scoped css

Comments

[Александр]

Мне не нравится этот вариант тем что селекторы становятся более тяжёлыми в данном случае...