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

【问题标题】：Is it possible to extract scss with a specific variable into css using gulp?是否可以使用 gulp 将具有特定变量的 scss 提取到 css 中？
【发布时间】：2023-04-07 16:45:02
【问题描述】：

我正在使用 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 的新文件？

【问题讨论】：

您是否只想将那些带有 sass 变量的类或 id 提取到 css 文件中？所以不是 .element 在你的例子中？
是的，但我的输出文件应该包含 .background { background : somecolor} .button{color : somecolor}

标签： html css npm sass gulp

【解决方案1】：

您可以在 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
}

【讨论】：

【解决方案2】：

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

【讨论】：

@Ameer Khan 这就是你要找的东西吗？