Ошибка "Unexpected unknown pseudo-element selector «::v-deep»" в Nuxt.js возникает, когда вы используете псевдоэлемент ::v-deep в стилях, но этот псевдоэлемент не поддерживается в Nuxt.js по умолчанию.
::v-deep является специфичным селектором, который используется во vue-loader для обхода ограничений области видимости стилей в компонентах Vue. Это позволяет применять стили к дочерним компонентам, которые находятся во вложенных компонентах.
Однако, начиная с версии Nuxt.js 2.x, плагин vue-loader, который раньше использовался, был заменен на @nuxt/vue-app. В этой новой версии плагина не поддерживается селектор ::v-deep.
Есть несколько способов решить эту проблему.
1. Используйте атрибут scoped для стилей в компоненте. Это создаст уникальные идентификаторы классов для стилей внутри компонента и изолирует их от других компонентов. Например:
<style scoped>
.myClass::v-deep {
// Ваши стили
}
</style>
2. Если вам действительно нужно применить стили ко всему приложению или более высоким уровням вложенности компонентов, можно использовать глобальные стили. Для этого добавьте свое правило ::v-deep в файл стилей, который подключается глобально. Например:
/* app.css */
.myClass::v-deep {
// Ваши стили
}
3. Вместо ::v-deep можно использовать другие селекторы, такие как :deep или >>>, которые эквивалентны ::v-deep. Например:
<style scoped>
.myClass >>> .childClass {
// Ваши стили
}
</style>
Обратите внимание, что селекторы >>> и /deep/ также не рекомендуются к использованию и могут быть устаревшими методами в будущем.
Это не полный список возможных способов решения проблемы, и выбор зависит от ваших потребностей и предпочтений. Но надеюсь, что эти рекомендации помогут вам решить проблему с ошибкой "Unexpected unknown pseudo-element selector «::v-deep»" в Nuxt.js.