在Gulp中如何防止gulp-sass將CSS縮小為1個文件

Question

有沒有辦法告訴gulp-sass處理SASS文件，但仍然保留源文件夾結構。 我們不希望將它們縮小/串聯到一個主文件中。 例如，如果我有：

src/
  components/
    _header.scss
    _sidebar.scss
    _card.scss

我可以告訴它將它們處理為：

dist/
  components/
    header.css
    sidebar.css
    card.css

Gulp文件

gulp.task('styles:dist', () => {
  return gulp
    .src('./src/styles/**/*.+(scss|sass|css)', { base: './' })
    .pipe(
      sass({
        outputStyle: 'expanded',
      }).on('error', sass.logError)
    )
    .pipe(gulp.dest('./dist'));
});

提前致謝！

Answer 1

首先安裝cleanCSS gulp插件，然后運行您的任務以將scss或sass或更少的文件轉換為css，然后使用css任務將所有css文件轉換為一個縮小並合並的css文件。

var cleanCSS = require('gulp-clean-css');

gulp.task('css', () => {
return gulp.src('./src/styles/**/*.css')
  .pipe(cleanCSS({
      compatibility: 'ie8',
      level: {
          1: {
              specialComments: 0,
          },
      },
  }))
  .pipe('./dist'))
});