RISOLTO npm run dev genera codice css errato da file scss

[alemian95]

Salve, ho un file sass che compilo con il comando

npm run dev

La compilazione viene eseguita correttamente, peccato che il file generato sia errato, cerco di spiegarmi meglio

.nav-link {
    color: $color_light;
    font-weight: 600;
    font-size: 1.5em;

    :hover {
        color: $color_light;
    }
}

Questa è una porzione del file scss, il file css generato però si presenta così

.nav-link {
  color: rgb(245, 245, 245);
  font-weight: 600;
  font-size: 1.5em;
}
.nav-link :hover {
  color: rgb(245, 245, 245);
}

Il problema è quello spazio che si crea tra .nav-link e :hover, se lo rimuovo il codice funziona perfettamente, se lo lascio no. Qualcuno ha mai avuto un problema simile?

 

[alemian95]

Ho trovato una soluzione, non so bene se si tratta semplicemente di un workaround e/o se c'è una soluzione diversa, però funziona.
Si tratta di inserire il carattere '&' prima di :hover nel file scss,

.nav-link {
    color: $color_light;
    font-weight: 600;
    font-size: 1.5em;

    &:hover {
        color: $color_light;
    }
}

 

[cdtux]

Non è un workaround. Per usare gli pseudo elementi devi associarli al parent selector (via &)