Ву.js 2: Scoped style не работает с sass / scss
В моем Vue.компонент js когда я устанавливаю стиль в "scoped", стили игнорируются:
<style lang="sass" scoped>
Я получаю следующую ошибку в консоли:
[HMR] unexpected require(609) to disposed module
Он работает так, как ожидалось, если я не добавляю атрибут "scoped".
Ответы - Ву.js 2: Scoped style не работает с sass / scss / Vue.js 2: Scoped style not working with sass/scss
25.07.2018 11:09:45
Преобразование моего комментария в ответ.
При работе со стилями с областью видимости Vue добавляет dataатрибут данных.
Например, dataстановится .list-container:hover
Если вам нужен глубокий селектор-то есть, который влияет на дочерние компоненты - вы можете использовать комбинатор
.list-container[data-v-21e5b78]:hoverкоторый будет скомпилирован в
<style scoped>
.a >>> .b { /* ... */ }
</style>
Если SASS не может разобрать .a[data-v-f3f3eg9] .b { /* ... */ }
> вы можете заменить его на >>>вместо этого.
Если вы не используете комбинатор, то
/deep/будет скомпилирован в
<style scoped>
.a > .b { /* ... */ }
</style>
vue-loader, чтобы увидеть, как этот атрибут генерируется. Я бы не стал делать это сам-вместо этого попробуйте построить свои селекторы с помощью комбинатора. Это не замена для > - Он просто заявляет, что класс слева будет нацелен на атрибут > data-v
15.09.2019 08:00:11
Вы можете использовать ::v-deepдля таргетинга стилей области дочернего компонента.
Пример:
<template>
<main class="content">
<child-component></child-component>
</main>
</template>
В этом случае, если вы хотите изменить цвет абзацев<p>в дочернем компоненте, вы можете сделать это с помощью:
.content ::v-deep p {
color: red;
}