...

Използване на Bootswatch теми в Laravel 5.5+

Как да използваме Bootswatch темите в Ларавел 5. Изпробвано на 5.2 - 5.8
преди 2 месеца

Bootswatch предлага няколко теми за различен вкус. Ето как лесно да ги вградим в Laravel 5 проект:

  • първо инсталираме bootswatch
    npm install bootswatch
  • след това модифицираме resources/assets/saas/app.scss да изглежда така:
    // Fonts
    @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);   
    // Variables
    // @import "variables"; - Default variables included with laravel no longer required
    // Bootswatch Variables for your chosen theme   
    @import "node_modules/bootswatch/readable/variables";
    // Bootstrap
    @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
    // Bootswatch theme main CSS files
    @import "node_modules/bootswatch/readable/bootswatch";

    не забравяйте на мястото на readable да попълните желаната тема

  • Правим още една проверка дали няма още зависимости, които да инсталира npm
    npm install
  • и компилираме накрая, за да видим резултатите
    npm run dev

    А ако искате да редактирате готовите теми трябва да свалите двата scss файла от сайта на boowatch и да ги запишете локално. Избираме примерно стила Cosmo. Създаваме директория resouces/assets/sass/cosmo и в нея слагаме двата файла _variables.scss и _bootswatch.scss. После променяме resouces/assets/sass/app.scss да изглежда така:

    // Fonts
    @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
    // Variables
    //@import "variables";
    // Bootswatch Variables for your chosen theme
    //@import "node_modules/bootswatch/flatly/variables";
    @import "cosmo/variables";
    // Bootstrap
    @import "~bootstrap-sass/assets/stylesheets/bootstrap";
    // Bootswatch theme main CSS files
    //@import "node_modules/bootswatch/flatly/bootswatch";
    @import "cosmo/bootswatch";

    Тесвтаме дали всчко работи:

    npm run dev

    Сега може чрез промяна на _variables.scss и _bootswatch.scss да изменяме стиловете по наш вкус.