@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
как можно исправить эту проблему??
  • Вопрос задан
  • 922 просмотра
Решения вопроса 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(); // Так можно
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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