Jak ustawić zmienną sass przy użyciu zmiennej środowiskowej?

Question

Używam Gulp jako mojego systemu kompilacji.

muszę zidentyfikować linki kierujące do stron zewnętrznych z SCSS następujące zasady:

// Links to external websites 
a[href*='//']:not([href*='example.com']) { 
    &::after { 
     content: ' \e895'; 
     font-family: 'Material Icons'; 
    } 
} 

LUB

$baseURL: 'localhost:3000'; // Set this variable based on environment 
a[href*='//']:not([href*='#{$baseurl}']) { 
    ... 
} 

Kiedy biegnę serwer Development adres Jestem obsługujących pliki to localhost:3000, a nie example.com. W rezultacie każdy pojedynczy link na stronie internetowej (na serwerze dev) ma małą ikonę wskazującą, że link prowadzi do zewnętrznej strony internetowej, co jest naprawdę rozpraszające.

Jaki jest najlepszy sposób ustawienia zmiennej scss na podstawie ustawień środowiska?

---

Edit:
To rozwiązanie działa, ale wprowadza tymczasowy plik, którego nie jestem dzikie o. Przeniosłem swój _variables.scss do katalogu głównego scss, przetwarzam ten plik i wyprowadzam go do podkatalogu base, w którym jest on używany do kompilowania skryptu. Dodałbym wtedy scss/base/_variables.scss do mojego .gitignore, aby uniknąć zatwierdzenia kontroli wersji.

_variables.scss

$baseURL: '/* @echo PATH */'; 

Gulpfile.js

// Set baseurl as Sass variable -- used to identify external links 
gulp.task('sass-vars', function() { 
    var baseURL = (config.production) ? 'example.com' : 'localhost:3000'; 
    return gulp.src('./scss/_variables.scss') 
    .pipe($.preprocess({context: {PATH: baseURL}})) 
    .pipe(gulp.dest('./scss/base')); 
}); 

Answer 1

Tak, to jest możliwe, aby to zrobić.

Aby uzyskać zmienne środowiskowe Jest to pakiet: gulp-env

Aby usunąć te linki z plików statycznych: gulp-preprocess

Ale ważne jest też, aby sprawdzić te zmienione pliki, aby nie popełnić ich w wersji rozwojowej. Haczyki do VCS są opcją.