时间戳

首页 > 解决方案 > 如何将许多样式文件（在不同目录中）连接到一个 css 文件？

gulp - 如何将许多样式文件（在不同目录中）连接到一个 css 文件？

问题描述

我使用 gulp 并且需要将我的所有 .styl 文件合并到 1 个主 css 文件而不导入到 main.styl。我怎么能做到？我不喜欢很多 css 文件，我希望只有一个 :) 感谢并为我的英语感到抱歉。

我的吞咽任务：

gulp.task('styl', function() {
  return gulp.src('src/helpers/styl/main.styl')
    .pipe(stylus())
    .pipe(autoprefixer({
      browsers: ['last 4 versions'],
      cascade: true
    }))
    .pipe(gulp.dest('src/css/'));
});

gulp.task('serve', ['styl'], function() {
  server.init({
    server: 'src',
    notify: true,
    open: true,
    cors: true,
    ui: false
  });
  gulp.watch('src/blocks/**/*.styl', ['styl']);
  gulp.watch('src/helpers/pug/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/pages/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/blocks/**/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/css/main.css').on('change', server.reload);
  run(
    'pretty'
  );
});

以及用于导入的 main.styl 文件：

@import 'src/blocks/block/*'
@import 'src/helpers/block/*'

标签： gulpstylus

解决方案

导入到 main 有什么问题？我认为批量导入可以解决您的问题。对于 .scss 文件，您可以使用https://www.npmjs.com/package/gulp-sass-bulk-import，但对于其他预处理器，您也可以找到一些东西。

推荐阅读