将所有sass文件合并成一个文件 [英] Combine all sass files into a single file

问题描述

在gulp-sass中有没有可用的选项来结合sass文件？

例如：

main.scss：

  $ var：red; 
  

control.scss：

  @import'main'; 
 .a {
 color：$ var; 
 
  

合并的输出文件应该是单个scss文件，如下所示

  $ var：red; 
 .a {
 color：$ var; 
 
  

解决方案

？

  gulp = require（'gulp'）; 
 concat = require（'gulp-concat'）; 
 
 //默认任务
 gulp.task（'default'，function（）{
 return gulp.src（'./*。scss'）
 （concat（'all.scss'））
 .pipe（gulp.dest（'./ dist /'））; 
}）; 
  

这应该在 ./ dist / all.scss中产生一个组合的scss 。

我不知道是否正确处理了 @import 语句，但这些
问题通常由 ad-hoc 模块处理（例如， gulp-sass ），它产生一个 .css 输出...

Is there any option available in gulp-sass to combine sass files?

For example:

main.scss:

$var: red;

control.scss:

@import 'main';
.a{
  color: $var;
}

The combined output file should be single scss file like below

$var: red;
.a{
  color: $var;
}

解决方案

Did you try something like this?

gulp = require('gulp');
concat = require('gulp-concat');

// the default task
gulp.task('default', function() {
    return gulp.src('./*.scss')
       .pipe(concat('all.scss'))
       .pipe(gulp.dest('./dist/'));
});

This should produce a single combined scss in ./dist/all.scss.

I don't know if @import statements are handled correctly, but these issues are usually handled by ad-hoc modules (for example, gulp-sass), which produce a .css output...

这篇关于将所有sass文件合并成一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！