[BUG]Sass compile error

[kagancetin]

WHY???

[danny007in]

ask dark2js please

[greefhorst]

Hi! 👋

Today I used patch-package to patch admin-lte@3.2.0 for the project I'm working on.

Php:

• php 8.1
• Laravel framework 10.31

Npm package.json

• Admin-lte 3.2.0
• Laravel-vite 0.7.2
• Sass 1.69.5

vite.config.js:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/sass/theme.scss',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: [
            {
                // this is required for the SCSS modules
                find: /^~(.*)$/,
                replacement: '$1',
            },
        ],
    },
})

resources/js/app.js:

import './bootstrap'
import 'admin-lte'

resources/js/bootstrap.js:

import 'bootstrap'

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/solid'

resources/sass/app.scss:

@import '~admin-lte/build/scss/adminlte';

During npm run build I received the following error:

Error: 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
  node_modules/admin-lte/build/scss/parts/_miscellaneous.scss 9:9  @import
  node_modules/admin-lte/build/scss/adminlte.scss 25:9             @import
  resources/sass/theme.scss 5:9                                    root stylesheet

Here is the diff that solved my problem:

diff --git a/node_modules/admin-lte/build/scss/mixins/_backgrounds.scss b/node_modules/admin-lte/build/scss/mixins/_backgrounds.scss
index a4a031c..bf30734 100644
--- a/node_modules/admin-lte/build/scss/mixins/_backgrounds.scss
+++ b/node_modules/admin-lte/build/scss/mixins/_backgrounds.scss
@@ -4,7 +4,7 @@

 // Background Variant
 @mixin background-variant($name, $color) {
-  &.bg-#{$name} {
+  .bg-#{$name} {
     background-color: #{$color} !important;

     &,

This issue body was partially generated by patch-package.