Assety SASS

Jeśli z jakichś przyczyn nie masz dostępu do assetów SASS w iCore, możesz opublikować odpowiednie pliki poleceniem:

php artisan vendor:publish --tag=icore.sass

Assety JS dostępne są z poziomu folderu:

/resources/sass/vendor/icore/


# Import bibliotek

Wszystkie biblioteki importowane są zbiorczo z poziomu plików:

  • resources/sass/vendor/icore/admin/admin.scss - dla panelu administracyjnego, wersja jasna
  • resources/sass/vendor/icore/admin/admin-dark.scss - dla panelu administracyjnego, wersja ciemna
  • resources/sass/vendor/icore/web/web.scss - dla strony, wersja jasna
  • resources/sass/vendor/icore/web/web-dark.scss - dla strony, wersja ciemna
  • resources/sass/vendor/icore/vendor/vendor.scss - niezależne od Bootstrap 4, wspólne dla obu

# Pliki styli

Wszystkie ustawienia i style klas znajdują się w plikach zaczynających się od znaku podkreślenia _ z poziomu folderów:

  • resources/sass/vendor/icore/admin/ - dla panelu administracyjnego
  • resources/sass/vendor/icore/web/ - dla strony

# Webpack

Wszystkie assety SASS są skompilowane na produkcji za pomocą Laravel Mix. W głównym folderze z aplikacją znajduje się plik konfiguracyjny:

  • webpack.mix.js

który można dostosować do własnych potrzeb (domyślnie umieszcza skompilowane pliki CSS bezpośrednio do folderu public).

Kompilację należy przeprowadzać wyłącznie w trybie deweloperskim. Potrzebne jest do tego środowisko nodejs oraz pobranie dużej liczby zależności przez npm za pomocą polecenia:

npm install

Kompilację można uruchomić poleceniem:

npm run production


# Dodawanie własnych styli/bibliotek do pliku Webpack

Nowe pliki nie ingerujące w assety iCore sugeruje się kompilować do osobnych plików. Proponowana konfiguracja:

  • dla panelu administracyjnego:
    .sass('resources/sass/custom/admin/admin.scss', 'css/custom/admin')
    .sass('resources/sass/custom/admin/admin-dark.scss', 'css/custom/admin')
  • dla strony użytkownika:
    .sass('resources/sass/custom/web/web.scss', 'css/custom/web')
    .sass('resources/sass/custom/web/web-dark.scss', 'css/custom/web')

Pliki publiczne pod tymi ścieżkami są już wstrzyknięte w nagłówek layout.blade.php:

<link href="{{ mix('css/vendor/icore/vendor/vendor.css') }}" rel="stylesheet">
<link href="{{ mix($getStylesheet()) }}" rel="stylesheet">
<link href="{{ asset($getStylesheet('css/custom')) }}" rel="stylesheet">

Dzięki temu możliwe będzie aktualizowanie plików publicznych CSS z iCore bezpośrednio przez publikację bez ryzyka, że nadpisze się swoje zmiany i bez konieczności ponownej kompilacji assetów.