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

Question

[lucrativeperson]

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
как можно исправить эту проблему??

Answer 1

[Сергей delphinpro]

как можно исправить эту проблему??

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

UPD

main.scss

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

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

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

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

.block {
  @include example(); // Так можно
}

Comments

[lucrativeperson]

ну да, вовсе не использовать &. это не решит проблему

[Сергей delphinpro]

lucrativeperson, на верхнем уровне. это не понятно?

[lucrativeperson]

не совсем, что это значит?

[Сергей delphinpro]

lucrativeperson, обновил ответ