[BUG] Top-level selectors may not contain the parent selector "&"

[forxer]

Error on local NPM build with v3.2.0

ERROR in ./resources/sass/admin/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
  ╷
7 │   &.bg-#{$name} {
  │   ^^^^^^^^^^^^^^
  ╵
  node_modules\admin-lte\build\scss\mixins\_backgrounds.scss 7:3  background-variant()
  node_modules\admin-lte\build\scss\_colors.scss 7:3              @import
  resources\vendor\adminlte3\sass\parts\_miscellaneous.scss 9:9   @import
  resources\vendor\adminlte3\sass\adminlte.scss 25:9              @import

Environment:

• AdminLTE Version: v3.2.0
• Operating System: Windows 10

Additional informations I've fix this error by replacing, in build\scss\mixins_backgrounds.scss line 7:

&.bg-#{$name} {

by

.bg-#{$name} {

There may be other similar occurrences but I am not including all files in my project.

[forxer]

Please, release hotfixes more regularly.

"Release early, release often" :)

[sdev-maxime]

Same problem, not buildable without this error. Maybe sass depedency need other version.

• admin-lte 3.2.0
• MacOs
• sass 1.41.0
• sass-loader 12.0.0

[glavrjk]

Same problem.

admin-lte 3.2.0 Win10 sass 1.49.7 sass-loader 12.4.0 @symfony/webpack-encore 1.8.1

[ChengXuchao]

您好，您的来信我已经收到！我会及时与您取得联系。谢谢……

[picks44]

Same issue here.

admin-lte 3.2.0 Win10 sass 1.49.7 sass-loader 12.4.0 @symfony/webpack-encore 1.8.1

Downgrading to 3.1.0 fixed the issue.

[REJack]

I search actually for a better solution, if I revert the change some overwrites doesn't work anymore.

[mbeckerle-xqueue]

I have the same issue. In fact, downgrading to 3.1.0 or manually removing the & in _background.scss works but I also have no idea how to resolve this properly.

In this comment you say "bg-* get overwritten by print mode" https://github.com/ColorlibHQ/AdminLTE/commit/52d947384e057378fc65b5b5f421caa9318be66a May I ask: What exactly was the problem?

[REJack]

none of the bg classes was called properly in print mode so none of them was shown in the correct color and the only fix that I found was to add a & :/

[denydias]

That PR #4276 should be the fix. It's much more robust than the one in OP.

[marksss0908]

I have also this issue right now and Im using infyomlabs admin lte package. how to fix this, someone pls help me

[ihabhamad]

you can make changes in 1- build\scss\mixins_backgrounds.scss line 7: 2 - build\scss\mixins_toasts.scss line line 7: from &.bg-#{$name} { to #{if(&, '&.bg-#{$name}','.bg-#{$name}')} {

[Joniras]

Is this breaking the build for everyone or can this be (automatically) avoided by upgrading other versions (like sass or other)?

And if it is breaking for everyone: Why has this not been merged and published ?

[denydias]

@Joniras it looks that breaks to everyone using 3.2.0. Anyway, being this a FOSS project, developers do not need to answer 'why' and 'when' kind of inquires no matter how important an issue looks from our developers/users perspective.

That being said, they already have merged PR #4276 which fix the issue. There is no release including this merge yet, but anyone could easily patch their local installs meanwhile, which many already did (including me).

[Joniras]

@denydias You are absolutely right, my tone was a little bit too demanding considering this being a FOSS project.

But thanks for the advice.

[QuentinCurtet]

Hello,

Same problem here using 3.2.0 with sass 1.51.0. Any idea when this fix will be released ?

Thanks in advance.

Best regards.

[akasifislam]

Admit-LTE Bug Fix go to this Directory-> node_modules\admin-lte\build\scss\mixins_backgrounds.scss

replace "&.bg-#{$name}" to ".bg-#{$name}"

[BigBigBoyVN]

Error on local NPM build with v3.2.0

ERROR in ./resources/sass/admin/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
  ╷
7 │   &.bg-#{$name} {
  │   ^^^^^^^^^^^^^^
  ╵
  node_modules\admin-lte\build\scss\mixins\_backgrounds.scss 7:3  background-variant()
  node_modules\admin-lte\build\scss\_colors.scss 7:3              @import
  resources\vendor\adminlte3\sass\parts\_miscellaneous.scss 9:9   @import
  resources\vendor\adminlte3\sass\adminlte.scss 25:9              @import

Environment:

• AdminLTE Version: v3.2.0
• Operating System: Windows 10

Additional informations I've fix this error by replacing, in build\scss\mixins_backgrounds.scss line 7:

&.bg-#{$name} {

by

.bg-#{$name} {

There may be other similar occurrences but I am not including all files in my project.

Same problem, thank you for your solution

[Alexey-hash12]

try this in your app.css(or app.scss)

• { // Admin lte @import "~admin-lte"; } error says that selector is 'Top level selector'. so this is how we change it. go to node_modules and change there is not an option case usually node_modules does'n commit to git

[Joniras]

In the mentioned Issue #4586 a "nice" solution is provided

https://github.com/ColorlibHQ/AdminLTE/issues/4586#issuecomment-1307247568

[thomasjoscht]

Hey, could you please release a version with this hotfix like 3.2.1? Currently this bug breaks my build process. Because adminlte lib will automatically refreshed I couldn‘t fix it by myself. Thx a lot.

[cwittstock]

is there any news on this? we have the same problem. :(

[ShinichiKikukawa]

I have the same problem.

"admin-lte": "^3.0",

video_share_app-webpacker-1  | 
video_share_app-webpacker-1  | ERROR in ./app/javascript/stylesheets/organizations.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./node_modules/import-glob-loader!./app/javascript/stylesheets/organizations.scss)
video_share_app-webpacker-1  | Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
video_share_app-webpacker-1  | SassError: Top-level selectors may not contain the parent selector "&".
video_share_app-webpacker-1  |   ╷
video_share_app-webpacker-1  | 7 │   &.bg-#{$name} {
video_share_app-webpacker-1  |   │   ^
video_share_app-webpacker-1  |   ╵
video_share_app-webpacker-1  |   node_modules/admin-lte/build/scss/mixins/_backgrounds.scss 7:3   background-variant()
video_share_app-webpacker-1  |   node_modules/admin-lte/build/scss/_colors.scss 7:3               @import
video_share_app-webpacker-1  |   node_modules/admin-lte/build/scss/parts/_miscellaneous.scss 9:9  @import
video_share_app-webpacker-1  |   node_modules/admin-lte/build/scss/adminlte.scss 25:9             @import``` 

[DoobleD]

Same issue here, any chance of a new release?