Задать вопрос
@lucrativeperson

Top-level selectors may not contain the parent selector «&»?

Compiled with problems:X

ERROR in ./src/styles/main.scss (./src/styles/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".

430 │ &__box{
│ ^^^^^^

src\styles\main.scss 430:1 root stylesheet
как можно исправить эту проблему??
  • Вопрос задан
  • 1047 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • GB (GeekBrains)
    Профессия Фронтенд-разработчик
    9 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Решения вопроса 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
как можно исправить эту проблему??

Ровно так, как написано в тексте ошибки: Не использовать "&" на верхнем уровне.

UPD

main.scss
@mixin example() {
  &::hover { color: red; } // Так можно
  // но миксин можно использовать только внутри родительского селектора
}

&::hover { color: red; } // Так нельзя, нет родителя

.block {
  &::hover { color: red; } // Так можно, есть родительский селектор (.block)
}

@include example(); // Так нельзя, внутри обращение к родителю, а его нет

.block {
  @include example(); // Так можно
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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