sass - 如何使用环境变量设置 sass 变量？

Question

我使用 Gulp 作为我的构建系统。

我需要使用 scss 以下规则识别指向外部网站的链接:

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

或者

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

当我运行开发服务器时，我提供文件的地址是 localhost:3000 ，不是 example.com .结果是网站(在开发服务器上)上的每个链接都有一个小图标，表明该链接指向外部网站，这确实令人分心。

根据环境设置设置 scss 变量的最佳方法是什么？

编辑:
此解决方案有效，但它引入了一个临时文件，我对此并不感冒。我搬家了 _variables.scss进入scss根目录，我处理这个文件并将它输出到 base用于编译 scss 的子目录。然后我会添加 scss/base/_variables.scss到我的 .gitignore避免提交版本控制。

_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

是的，可以这样做。

要获取环境变量，有一个包:gulp-env

从静态文件中删除这些链接:gulp-preprocess

但是检查这些更改的文件也很重要，而不是将它们作为开发版本提交。 Hook 到您的 VCS 是一种选择。