Ву.js 2: Scoped style не работает с sass / scss

Ву.js 2: Scoped style не работает с sass / scss

23.07.2018 05:35:36 Просмотров 47 Источник

В моем Vue.компонент js когда я устанавливаю стиль в "scoped", стили игнорируются:

<style lang="sass" scoped>

Я получаю следующую ошибку в консоли:

[HMR] unexpected require(609) to disposed module

Он работает так, как ожидалось, если я не добавляю атрибут "scoped".

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss#comment89920054_51470954
Что происходит, когда вы останавливаете свой dev-сервер, а затем запускаете его снова ?
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss#comment89946785_51470954
При дальнейшем исследовании он работает для элементов, уже существующих в dom, но он не работает для элементов, добавленных динамически с помощью d3, например.
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss#comment89952021_51470954
Конечно, это не будет работать для вещей, созданных за пределами Vue - если вы хотите стилизовать такие вещи, вам нужны специально созданные селекторы.
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss#comment89987542_51470954
Спасибо @IVOGELOV, я думал, что все, что было создано в компоненте, может быть ограничено. Вы хотите написать свой комментарий в качестве ответа, чтобы я мог его принять?

Ответы - Ву.js 2: Scoped style не работает с sass / scss / Vue.js 2: Scoped style not working with sass/scss

Является ответом!
IVO GELOV

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>
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss/51513918#comment90027822_51513918
Спасибо @IVOGELOV. Случайно вы не знаете, есть ли способ получить атрибут data-v, который будет сгенерирован (например: "data-v-f3f3eg9"), чтобы он мог быть добавлен к элементам, созданным динамически?
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss/51513918#comment90040095_51513918
Вам нужно будет посмотреть в исходном коде vue-loader, чтобы увидеть, как этот атрибут генерируется. Я бы не стал делать это сам-вместо этого попробуйте построить свои селекторы с помощью комбинатора. Это не замена для > - Он просто заявляет, что класс слева будет нацелен на атрибут > data-v
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss/51513918#comment90137698_51513918
Комбинатор работает нормально, просто есть случаи, когда мне нужно использовать его в сочетании с расширяющимися стилями (@extend), я не получаю ожидаемого результата. Я просто использовал специально созданные селекторы вместо этого.
https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss/51513918#comment101299839_51513918
Спасибо. /deep / очень важен для скомпилированного SCSS / SASS.
Chase

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;
}
Закрыть X