Использование /глубокая/ошибка в Vue

Я использовал SCSS в vue-lic3, но там был странный баг, использование /deep/ будет сообщать об ошибках, я не хочу его видеть.

Среда выполнения кода vue-cli3 + вант + scss

css

/deep/ .van-tabs__content.van-tabs__content--animated,
  .van-tabs--line,
  .van-pull-refresh,
  .van-pull-refresh__track {
    height: 100%;
  }

vue.config.js

css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/style/module.scss";`
      }
    }
  },

ошибка

Failed to compile with 1 errors                                                                                                                                                                           14:14:46
 error  in ./src/views/RankingList.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  .van-tabs--line,
 ^
      Expected selector.
    ╷
274 │   /deep/ .van-tabs__content.van-tabs__content--animated,
    │   ^
    ╵
  stdin 274:3  root stylesheet
      in F:\web\project-a\src\views\RankingList.vue (line 274, column 3)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/RankingList.vue?vue&type=style&index=0&lang=scss& 4:14-444 14:3-18:5 15:22-452
 @ ./src/views/RankingList.vue?vue&type=style&index=0&lang=scss&
 @ ./src/views/RankingList.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.15:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Кажется, что с vue должно работать >>> или ::v-deepдокументы

— 26.04.2019 08:48

javascript vue.js webpack sass vue-cli-3

26.04.2019 08:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 381

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

В моем проекте я использую следующий синтаксис .class__name { /deep/ { .class_i_want_to_change {}}}, и он отлично работает. Вы пробовали это?

Является ли этот код css началом всего файла css? Потому что я думаю, что вы не можете просто использовать /deep/ на верхнем уровне. Кроме того, вы пробовали ::v-deep, как в Vue документ

— 26.04.2019 08:47

26.04.2019 08:33

Для меня /deep/ не будет компилироваться.

Я использовал ::v-deep:

.scoped-element {
    color:white;

    ::v-deep .child-of-scoped-element {
        color: black;
    }
}

Или

.scoped-element::v-deep.child-of-scoped-element {
    color: black;
}

09.03.2021 04:42

Вы можете использовать ::ng-deep

Вместо:

.my-pagination /deep/ .ngx-pagination .current {
  background: #737373;
}

Пытаться:

.my-pagination ::ng-deep.ngx-pagination .current {
  background: #737373;
}

08.02.2022 15:13

Другие вопросы по теме

Я не могу отображать данные из API, используя v-for в vuejs

This.items.slice не является функцией

Как передать v-модель в другую v-модель

Vue: это в другой области, чтобы получить один и тот же объект

Передать Vue наблюдаемым в качестве опоры?

Как заменить нулевые значения из базы данных пустой строкой в цепочке для функций

Vue 3 + электрон простой пример не работает

Реактивность: изменение свойства в массиве, применяемое к событию окна

Как экспортировать переменные с динамическими именами

Vue js v-for не работает, когда массив передается через реквизит

Использование /глубокая/ошибка в Vue

Ответы 3

Другие вопросы по теме

Похожие вопросы