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.scssfile应该在最顶部有一个import语句，如：

@import "variabales.scss";

.button{
    color : $color;
}

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

.element{
    margin : 0 auto;
}

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

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

如果你想让你的最终app.css文件中包含更多的sass变量，那么你可以通过修改regexp来匹配＆＃34; $＆＃34;而不是具体的＆＃34; $ color＆＃34;。

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

然后你可以摆脱fs。 readFile call。

以下是生成的app.css文件：

.button {
  color: #009999; }

.background {
  background: #009999; }

Answer 2

您可以在gulp中执行两项任务来提取单独的文件，然后通过文档中的链接获取它们：

gulp.task('scss-variables', function() {
   return gulp.src('path/variables.scss')
        .pipe(gulp.dest('variables.css'))
});
gulp.task('scss-app', function() {
   return gulp.src('path/app.scss')
        .pipe(gulp.dest('app.css'))
});

但是使用scss将一个文件导入另一个文件更合适：

/* app.scss */
import 'variables';

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

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

2 个答案: