Dziś zaprezentujemy jak łatwo można w Laravelu pobierać zmienną środowiskową z env i przekazywać je do plików sass. W poniższym poradniku założyliśmy, że do uruchamiania Gulp wykorzystywane są paczki laravel-elixir.

Do czego może się to przydać?

Załóżmy, że w sass używana jest zmienna do zdefiniowania koloru, który będzie dalej używany w stylach różnych klas np.:

$color: #101c42;

.header { background-color: $color; }

W przypadku, gdyby wartość tej zmiennej (czyli wybrany kolor) miała być definiowana dynamicznie (np. chcemy, aby kolor był inny w zależności od ustawień uruchamianej domeny) – pojawia się problem. Trzeba tę zmienną ustawiać w pliku sass – nie można sobie tego ustawić w pliku css, który byłby dynamicznie dołączany.

Artykuł opisuje jak tego typu problem można rozwiązać.

Instalacja

Oprócz wspomnianej wcześniej paczki laravel-elixir, potrzebujemy jeszcze paczki umożliwiającej odczyt zmiennych z pliku .env. Aby ją zainstalować w konsoli – wywołujemy poniższa komendę:

npm install node-env-file –save

Plik .env

Do pliku .env dodajemy zmienną, którą chcemy przekazywać do plików scss. W naszym przypadku niech to będzie COLOR np.:

COLOR=#000000

Biblioteki

Dodajemy potrzebne biblioteki do skryptu gulpfile.js:

var elixir = require(‘laravel-elixir’);

var fs = require(‘fs’);

var ENV = require(‘node-env-file’)(__dirname + ‘/.env’);

Jak widać powyżej, podczas dodawania biblioteki node-env-file od razu wskazujemy miejsce, gdzie znajduje się plik .env. W moim przypadku – znajduje się w tym samym katalogu co tworzony skrypt.

Odczyt

W tym momencie możemy bez problemu odczytać naszą wartość z pliku .env w dalszej części skryptu gulpfile.js:

var color = ENV.COLOR;

Przekazanie wartości do sass

Mając już zmienną, w jakiś sposób trzeba przekazać tę wartość do sass. W tym celu wykorzystamy pośrednika, w postaci dodatkowego pliku sass, który będzie ten skrypt tworzył, a następnie wywoływał kompilacje plików scss. Kod do umieszczenia w pliku gulpfile.js poniżej:

elixir(function(mix) {

        fs.writeFile(‘./resources/assets/sass/custom.scss’, “$color:”+color+””, function (err) {

                  if (err)     

                         return console.log(err); 

        }); 

        mix.sass(‘app.scss’);

}

Jak widać, tworzymy plik custom.scss posiadający zmienną $color pobraną z pliku .env. Teraz wystarczy nowy plik dodać do pliku app.scss, aby móc w nim użyć nasza zmienną $color:

@import “custom.scss”;

.header {

color:$color;

}

I gotowe .header będzie miał kolor taki, jaki podamy w pliku .env
Oczywiście, można to bez problemu rozszerzyć, w celu użycia większej liczby zmiennych.
Autor: Jarosław Furmanek, programista w DevPark