SASS @use Error: Undefined variable

pytanie zadane 11 lipca 2021 w HTML i CSS przez RavenTheReaper Początkujący (280 p.)
edycja 11 lipca 2021 przez RavenTheReaper

Witam, zacząłem się uczyć SCSS i dowiedziałem się że zamiast używać @import powinno się używać @use. Mam problem, na razie robię mały projekt do nauki SCSS, stworzyłem plik _index.scss dałem tam @forward'y do pozostałych plików scss ale jak próbuje zmusić sass do obserwowania folderu ze zmiennymi dostaje błąd że niby moje zmienne są niezadeklarowane chociaż wszystko powinno się zgadzać, nie wiem dlaczego gdy używałem @import wszystkie zmienne się widziały bez problemu a nagle przy @use przestały chociaż dodałem folder z _index.scss do main.scss. nigdzie nie mogłem znaleźć rozwiązania dlatego napisałem tutaj.

swoją drogą nie wiem po co zmieniać @import skoro wszystko działało... widać lubią utrudniać życie. screen z VSC

@use "../main-scss" as *;

2 odpowiedzi

odpowiedź 11 lipca 2021 przez pablop76 VIP (123,120 p.)

Myślę, że nie będę kopiował tekstu, który bardzo jasno tłumaczy różnicę więc wstawiam link

komentarz 12 lipca 2021 przez RavenTheReaper Początkujący (280 p.)
edycja 12 lipca 2021 przez RavenTheReaper

to mi nic nie daje, widziałem ten artykuł nic nie tłumaczy dlaczego zmienne nie są widoczne w innych plikach. po to dałem AS *; żeby nie trzeba było pisać

button.$padding; tylko samo $padding;

z resztą po zadeklarowaniu tego jako np. "as m" i tak nie działa ten sam error

komentarz 12 lipca 2021 przez pablop76 VIP (123,120 p.)
edycja 13 lipca 2021 przez pablop76

swoją drogą nie wiem po co zmieniać @import skoro wszystko działało...

Chyba wiele tłumaczy, przynajmniej jeśli chodzi o powody zamiany.

dlaczego zmienne nie są widoczne w innych plikach. po to dałem AS *; żeby nie trzeba było pisać

1

button.$padding; tylko samo $padding;

to nie służy do tego żeby zmienić zasięg. as to jest alias dla zbyt długich nazw i użycie * nie jest zalecane bo to ponownie rozmywa przestrzeń nazw.

komentarz 13 lipca 2021 przez RavenTheReaper Początkujący (280 p.)

to w jaki sposób mam zadeklarować zmienne żeby były widoczne we wszystkich plikach?dodam że button.$padding; też nie działa po za głównym scssem jak chce go użyć np do zrobienia przycisku gdzie indziej to tam taka zmienna nie istnieje.

komentarz 13 lipca 2021 przez pablop76 VIP (123,120 p.)
edycja 13 lipca 2021 przez pablop76

Tworzysz dodatkowy plik scss dla plików pomocniczych (zmiennych, domieszek, czcionek, rozszerzeń) i w tym pliku dodajesz te pliki pomocnicze za pomocą instrukcji @forward, która łączy je i udostępnia ich zawartość tam, gdzie jest wymagana.

Następnie w pliku głównym scss dodajesz ten plik pomocniczy za pomocą instrukcji @use

W plikach komponentów dodajesz za pomocą @use plik dodatkowy i tu możesz dodać mu alias (as), jeżeli jego nazwa jest niewygodna w użyciu, bo jest np. długa i zmienne dodajesz za pomocą aliasu lub nazwy pliku jeżeli nie ma aliasu. (lub bez aliasu i nazwy jeżeli użyjesz jako alias * - niezalecane)