Nadpisywanie scss dla Elements UI

Jozdowska Edyta · 18 Listopad 2019

Kategorie:  
Tagi:  

Pisząc ostatni projekt zdecydowałam się na użycie gotowego już komponentu dla Vue Elements UI. Jest on bardzo wygodny do szybkiego zrobienia app z wykorzystaniem już napisanych komponentów i stylów. Ma jednak poważną wadę. Zresztą dotyczy to większości spredefiniowanych elementów.

Według dokumenatcji powinniśmy zaimplementować style Element UI w naszym projekcie poprzez:

1
2

//NIE DODAWAJ TEJ LINII
import "element-ui/lib/theme-chalk/index.css";

Importujemy więc do naszego projektu już skompilowane style z .scss do .css. Nadpisywanie tak zaimplementowanego pliku jest dość pracochłonne. By wprowadzić poważniejsze zmiany, musimy nadpisać styl elementów zwykłym kodem css. Co więc możemy zrobić innego?

Pierwsza i naważniejsza rzecz - NIE DODAWAĆ do naszego projektu całego index.css, tak jak podają w instrukcji. Zamiast tego możemy ułożyć własny import, w dodatku tylko z tymi stylami, jakich komponentów używamy. Własna implementacja będzie miała wpływ na zmniejszenie wielkości importowanych plików, co uważam za plus.

Z całego Element UI korzystam we wspomnianym na wstępie projekcie jedynie z column, card, button, messageBox, alert, dialog i jedynie te style chciałabym zaimplementować - (optymalizacja zawsze na pierwszym miejscu).

W dodatku chciałabym zmienić breakpoints (punkty łamania układu i zachowywania elementów, w zależności od wielkości urządzenia, na jakim są wyświetlane) dla mojej app. No kto widział aby xs ustawiać na wartość 768px.

Po krótkim researchu w necie, wielu próbach, w końcu się udało. Należało zrobić mniej więcej tak:

1.Trochę teorii scss i budowy package’a Element UI

Jak to w node wszystkie package z jakich korzysta nasz projekt znajdziemy w folderze node_modules. Każdy, kto miał choć chwilę styczności z Node i npm o tym wie.

W tym folderze też znajdziemy src dla Element UI. Bezpośrednia ścieżka to: node_modules\element-ui\packages\theme-chalk\src\. Tutaj są wszystkie pliki, które nas interesują.

Przeglądając plik ze zmiennymi - ponieważ to on był dla mnie najważniejszy - czyli node_modules\element-ui\packages\theme-chalk\src\common\var.scss zauważyłam, że wszystkie zmienne są określone jako !deafult. Co to oznacza w scss?

W dokumentacji sass’a możemy przeczytać,

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

Czyli zmienna zdefiniowana jako !deafult będzie wykorzystywana, wtedy i tylko wtedy gdy wcześniej nie zostanie zdefiniowana zmienna “zwykła” o tej samej nazwie. Czyli, jeżeli mamy zmienną w naszych plikach scss zdefiniowaną jako:

1

$bg: #000;

A następnie dodamy:

1

$bg: #ff0 !default;

To nasz element któremu nadamy kolor tła w ten sposób:

1
2
3

.div {
  background-color: $bg; //będzie miał tło czarne, a nie żółte
}

Będzie zakolorowany na czarno, a nie na żółto.

W momencie jeśli usuniemy deklarację tła jako #000 nasz element zakoloruje się na żółto.

Będzie on żółty również wtedy, gdy zmienimy kolejność, czyli wpierw zdefiniujemy zmienną jako !default, użyjemy jej przypisując do elementu .div, a następnie zdefiniujemy jako zwykłą zmienną - naturalny cykl. Dopiero nadpisując ponownie przypisanie tła do elementu znów zakoloruje nam go na #000.

1.1.Uzbrojeni w podstawową wiedzę możemy zabrać się do zadania.

2.Import wybranych tylko styli scss dla Element UI

  1. W naszym głównym pliku ze stylami nazwijmy go jako base.scss definiujemy zmienną z czcionką o wartości ~element-ui/packages/theme-chalk/src/fonts, inaczej wyskoczy nam błąd:
1

Can't resolve './fonts/element-icons.ttf'

Następnie deklarujemy wszystkie te zmienne, jakie chcemy nadpisać.
Dla mnie były to breakpointy. Oczywiście w tym fragmencie, kolejność deklaracji nie ma znaczenia.

1
2
3
4
5
6
7
8

$--sm: 350px;
$--md: 450px;
$--lg: 1200px;
$--xl: 1920px;
$--font-path:"~element-ui/packages/theme-chalk/src/fonts";
.
.
.
  1. Importujemy pliki .scss Element UI zaczynając od base.scss. Pamiętajmy, że wszystkie powyżej zdeklarowane zmienne zostaną nadpisane naszymi wartościami. Jak jakiejś nie zdefiniowaliśmy zostanie użyta zmienna domyślna określona przez autorów Element UI.
1
2
3
4
5
6
7
8
9

@import "~element-ui/packages/theme-chalk/src/base.scss";
//dalej wszystkie style tych komponentów, jakie wykorzystujemy
@import "~element-ui/packages/theme-chalk/src/card";
@import "~element-ui/packages/theme-chalk/src/col.scss";
@import "~element-ui/packages/theme-chalk/src/dialog.scss";
@import "~element-ui/packages/theme-chalk/src/message-box.scss";
@import "~element-ui/packages/theme-chalk/src/alert.scss";
@import "~element-ui/packages/theme-chalk/src/card.scss";
@import "~element-ui/packages/theme-chalk/src/button.scss";
  1. No i jak to z .scss bywa, nasz plik base.scss importujemy do głównego pliku projektu App.vue poprzez:
1
2
3
4

<style lang="scss">
//ścieżka do naszego base 
@import "@/scss/base.scss";
</style>

Jozdowska Edyta * FullStack Developer

Pisanie kodu jest moją pasją. Zajmuję się tym od przeszło 10 lat, z większą lub mniejszą intensywnością.
Piszę kod w PHP, JS, SCSS i Python. Nie stronię też od poznawania nowych, lub jak kto woli starych rozwiązań jak Jekyll oraz innych języków np. Java.

więcej o mnie

Powiązane posty:

Obiektowo w JS - czyli klasy
Algorytm QuickHull do obliczenia otoczki wypukłej (convex hull) cz. 2
Algorytm QuickHull do obliczenia otoczki wypukłej (convex hull) cz. 1
Code rewiev walidacji formularza w JS
↑