Question

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

我需要使用scss遵循规则识别指向外部网站的链接：

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

OR

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

当我运行开发服务器时，我提供文件的地址是localhost:3000，而不是example.com。结果是网站上的每个链接（在开发服务器上）都有一个小图标，表示链接进入外部网站，这真的让人分心。

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

修改
这个解决方案有效，但它引入了一个临时文件，我并不喜欢它。我将_variables.scss移动到scss根目录中，处理此文件并将其输出到用于编译scss的base子目录中。然后，我会将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

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

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

1 个答案: