html - 是否可以使用 gulp 将带有特定变量的 scss 提取到 css 中？

Question

我正在使用 gulp 将 sass 编译为 css。现在我在 sass 中定义了颜色变量。 在 _varibales.scss 中。

  $color: #009999;

在 app.scss 中，我在多个地方使用了这个变量。

    .button{
      color:$color
    }
    .background{
       background :$color 
       padding:10px
    }
    .element{
       margin:0 auto
    } 

那么有没有办法提取具有此变量的类或 id 并使用 gulp 生成一个名为 color.css 的新文件？

Answer 1

我使用 line-reader 提出了这个解决方案:

var gulp = require("gulp");
var sass = require("gulp-sass");
var rename = require("gulp-rename");
var fs = require('fs');

// read a file line-by-line
var lineReader = require('line-reader');

gulp.task('default', function () {

  var myVar;
  var re;
  var s = "";  // will build up temp file with this variable

  fs.readFile('variabales.scss', 'utf8', function (err, contents) {

     // e.g., assumes a single line format like   $color: #009999;
     // myVar will = $color
    myVar = contents.split(/:/)[0].trim();

     // want to include lines that have a {, } or @ symbol on them
     // as well as the $___ sass variable
    re = new RegExp('(\\' + myVar + ')|{|}|@');
  });

  var readStream = fs.createReadStream('app.scss');
  lineReader.eachLine(readStream, function(line, last) {

    if (line.match( re )) {
      s += line + "\n";
    }   

    if (last) {

      fs.writeFileSync('temp.scss', s);

      gulp.src("temp.scss")
        // gulp-sass gets rid of the empty ruleset automatically!
        .pipe(sass().on('error', sass.logError))
        .pipe(rename('app.css'))
        .pipe(gulp.dest('./'));

      return false; // stop reading
    }
  })
});

您的 app.scss 文件应该在最顶部有一个 import 语句，例如:

@import "variabales.scss";

.button{
    color : $color;
}

.background{
    background : $color;
    padding : 10px;
}

.element{
    margin : 0 auto;
}

因此 Sass 可以从 variabales.scss 中检索变量。

毫无疑问，可以通过写入缓冲区而不是写入临时文件或直接写入流来改进这一点。

如果您希望最终的 app.css 文件中包含多个 sass 变量，而不仅仅是一个，您可以通过修改正则表达式来匹配“$”而不是特定的“$color”来概括这一点。

  re = new RegExp('[\\${}@]');

然后你就可以摆脱 fs 了。 readFile 调用。

这是生成的 app.css 文件:

.button {
  color: #009999; }

.background {
  background: #009999; }