[Vue] podział elementów

Question

Witam,

 

Mam pytanie dot. struktury plików w projekcie Vue.

Czy style do danych komponentów lepiej trzymać w osobnych plikach SCSS czy w tagu style wewnątrz plików *.vue?

Obecnie w plikach SCSS trzymam wyłącznie zmienne, style normalizacyjne oraz style dla body.

Answer 1

Generalnie jest to kwestia sporna i nie jest powiedziane, że musisz robić tak albo tak.

Trzymanie scss w oddzielnych plikach tak samo jak w .vue ma swoje wady i zalety. Zaletą trzymania ich oddzielnie jest na pewno, że pliki .vue się nie rozrastają przez co są łatwiejsze w utrzymaniu (ja osobiście nienawidzę długich plików). Zaletą trzymania styli w .vue jest scope'owanie styli przez co nie dostarczasz przeglądarce więcej styli niż ta potrzebuje.

Musisz zastanowić się co jest dla ciebie ważniejsze i wybrać samemu.

Comments

Nie tylko można dołączyć zewnętrzne style do SFC, lecz także mogą być one scope'owane -> https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns

---

Ciekawe rozwiązanie, dawno to dodali? Za co -1?

---

Raczej dawno

W kontekście istnienia powyższego mechanizmu, Twoje rozważania wprowadzają niepotrzebny chaos.

Druga sprawa, jeśli plik vue się rozrasta do nieprzyjemnych rozmiarów - należy go podzielić na mniejsze komponenty, a nie przenosić css-a w inne miejsce.

---

Nie wiedziałem, że istnieje taka opcja, mój błąd. Chętnie z tego skorzystam przy następnym projekcie w Vue.