Wie kann ich eine Sass-Variable mit einer Umgebungsvariablen setzen?

Question

Ich benutze Gulp als mein Build-System.

Ich brauche Links zu identifizieren zu externen Webseiten Dritter mit dem SCSS folgenden Regel zeigen:

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

ODER

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

Wenn ich renne einen Entwicklungsserver der Adresse I Dateien sind diene aus ist localhost:3000, nicht example.com. Das Ergebnis ist, dass jeder einzelne Link auf der Website (auf dem Dev-Server) ein kleines Symbol hat, das anzeigt, dass der Link auf eine externe Website geht, was wirklich störend ist.

Wie kann eine scss-Variable basierend auf einer Umgebungseinstellung am besten eingerichtet werden?

---

Edit:
Diese Lösung funktioniert, aber es stellt eine temporäre Datei, die ich nicht bin wild. Ich habe meine _variables.scss in den Scss-Root verschoben, ich verarbeite diese Datei und gebe sie in das Unterverzeichnis base aus, wo sie zur Kompilierung des Scss verwendet wird. Ich würde dann scss/base/_variables.scss zu meinem .gitignore hinzufügen, um die Versionskontrolle zu vermeiden.

_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

Ja, es ist möglich, das zu tun.

Um Umgebungsvariablen zu bekommen gibt es ein Paket: gulp-env

Um diese Links von statischen Dateien zu entfernen: gulp-preprocess

Aber es ist auch wichtig, diese geänderten Dateien zu überprüfen, nicht um sie als Entwicklungsversion zu begehen. Hooks zu Ihrem VCS ist eine Option.