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

【问题标题】：How can I set a sass variable using an environment variable?如何使用环境变量设置 sass 变量？
【发布时间】：2016-02-04 03:49:59
【问题描述】：

我使用 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'));
});

【问题讨论】：

看看：github.com/dlmanning/gulp-sass/issues/280
可能重复：stackoverflow.com/questions/15153613/…, stackoverflow.com/questions/14506578/…
这两个解决方案都使用 ruby/compass，其中包含一个配置文件，允许您设置 sass 环境变量。
@Roy 我做了同样的事情，尽管我将它分离到一个名为 _environment.scss 的文件中，然后将其导入到我的 _variables.scss 中，然后简单地将其添加到我的构建步骤中。不知道有没有更好的方法

标签： sass build-process development-environment

【解决方案1】：

是的，可以这样做。

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

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

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

【讨论】：