Làm cách nào để đặt biến sass bằng biến môi trường?

Question

Tôi đang sử dụng Gulp làm hệ thống xây dựng của mình.

tôi cần phải xác định các liên kết trỏ đến các trang web bên ngoài với SCSS sau quy tắc:

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

HOẶC

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

Khi tôi đang chạy một máy chủ phát triển địa chỉ tôi phục vụ tập tin từ là localhost:3000, không phải là example.com. Kết quả là mỗi liên kết duy nhất trên trang web (trên máy chủ dev) có một biểu tượng nhỏ cho biết liên kết đến một trang web bên ngoài, điều này thực sự gây mất tập trung.

Cách tốt nhất để đặt biến scss dựa trên cài đặt môi trường là gì?

---

Edit:
Giải pháp này hoạt động, nhưng nó giới thiệu một tập tin tạm thời, mà tôi không hoang dã về. Tôi đã di chuyển _variables.scss vào thư mục gốc scss, tôi xử lý tệp này và xuất nó vào thư mục con base nơi nó được sử dụng để biên dịch scss. Sau đó tôi sẽ thêm scss/base/_variables.scss vào số .gitignore của mình để tránh điều khiển phiên bản.

_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

Vâng, chúng ta có thể làm điều đó.

Để có được các biến môi trường có một gói: gulp-env

Để loại bỏ những liên kết từ các tập tin tĩnh: gulp-preprocess

Nhưng nó cũng rất quan trọng để kiểm tra những tập tin đã thay đổi, không phải cam kết chúng như là một phiên bản phát triển. Móc để VCS của bạn là một lựa chọn.