Merhabalar arkadaşlar. Ben SCSS kullanarak bir proje geliştiriyorum. Burada ':root' kullanarak variables'lar($) harici değişkenler kullanacağım. Fakat root dosyasına tanımladığım değişkenleri kullandığım zaman DOM'da e değişkleni 2 defa ve farklı olarak kullanıyor. Örnek verirsem:

__root.scss_

:root {
  --size-spacing: 10px;
}

__main.scss_

html {
  font-size: var(--size-spacing);
}

Bunu bir watch'dan geçirsem de geçirmesem projeye import sonrası(Nuxt.js kullanıyorum, fark etmiyor) Chrome consolunu açıp elemente baktığımda şöyle gözüküyor:

html {
    font-size: 10px;  -> ÜZERİ ÇİZİLİ!
    font-size: var(--size-spacing);
}

Neden bu kodu dublicate ediyor. Aslında 'font-size: 10px' hiç yazmadım fakat 2 kere yazıyor, birini disable edip diğerini gösteriyor. Hatam nerede?