Javascript 了解大口管订单 上下文

我想解析一些

.sass

文件，并在将它们编译成

.css

之前替换一个变量

为此，我使用了，并且：

Gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');

var settings = {
  HOST_URL: 'qa.host.com'
}

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.sass')
    .pipe(sass({indentedSyntax: true}))
    .pipe(preprocess({context: settings}))
    .pipe(gulp.dest('./dist'));
});

@import "partials/variables"

body
  background-image: url("//#{ $host_url }/foo.jpg")

.bar
  color: $red
  background-image: $host_url

$red: #ff0000
$host_url: '/* @echo HOST_URL */'

sass/style.sass

var gulp = require('gulp');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');

var settings = {
  HOST_URL: 'qa.host.com'
}

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.sass')
    .pipe(sass({indentedSyntax: true}))
    .pipe(preprocess({context: settings}))
    .pipe(gulp.dest('./dist'));
});

@import "partials/variables"

body
  background-image: url("//#{ $host_url }/foo.jpg")

.bar
  color: $red
  background-image: $host_url

$red: #ff0000
$host_url: '/* @echo HOST_URL */'

sass/partials/_变量。sass

var gulp = require('gulp');
var sass = require('gulp-sass');
var preprocess = require('gulp-preprocess');

var settings = {
  HOST_URL: 'qa.host.com'
}

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.sass')
    .pipe(sass({indentedSyntax: true}))
    .pipe(preprocess({context: settings}))
    .pipe(gulp.dest('./dist'));
});

@import "partials/variables"

body
  background-image: url("//#{ $host_url }/foo.jpg")

.bar
  color: $red
  background-image: $host_url

$red: #ff0000
$host_url: '/* @echo HOST_URL */'

CLI

gulp sass

这是可行的。它创建了一个

dist/styles.css

文件，其中包含预期替换的变量

问题: 第一次尝试时，我试图在

sass

之前执行

preprocess

：

.pipe(preprocess({context: settings}))
.pipe(sass({indentedSyntax: true}))

根本无法替换变量：

body {
  background-image: url("///* @echo HOST_URL *//foo.jpg"); }

.bar {
  color: #ff0000;
  background-image: '/* @echo HOST_URL */'; }

那么，为什么必须在

sass

之后执行

预处理

？sass转换后的管道不会返回已编译的css吗？这意味着变量已经被应用并压缩到流中

看起来在某个点上，流会向另一个方向移动。

首先进行预处理时，流不工作的原因： 该问题涉及编译时如何引用sass文件。由于

style.sass

导入

partials/variables

此文件在流外部引用，它将检索原始（未预处理）文件

为什么它在预处理之后工作：

---

由于编译后的

.css

仍然具有

'/*@echo HOST_URL*/'

值，因此预处理任务可以将该值替换为所需的值。没有黑魔法，也没有倒流。

这确实很奇怪。我查看了的代码，找到了他们用于匹配echo语句的代码。此外，我可以看到它们匹配.sass文件和css文件，它们都使用相同的规则。在对他们使用的正则表达式进行了一些修改之后，我得到了与您的两种情况相匹配的正则表达式（根据他们的规则，它是无效的，我不确定它是否是不同的标准）。如果它是单向的，就用它。这两种方式都应该没有问题。