在 Gulp 中如何防止 gulp-sass 将 css 缩小为 1 个文件答案

【问题标题】：In Gulp how to prevent gulp-sass to minify css into 1 file在 Gulp 中如何防止 gulp-sass 将 css 缩小为 1 个文件
【发布时间】：2019-04-27 09:10:42
【问题描述】：

有没有办法告诉gulp-sass 处理 SASS 文件但仍保留源文件夹结构。我们不希望它们被缩小/连接到一个主文件中。例如，如果我有：

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

我可以告诉它把它们处理成：

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

Gulpfile

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'));
});

提前致谢！

【问题讨论】：

你能提供你的 gulpfile 吗？
感谢您回复@Amaury Hanser！我已经添加了 gulpfile。
您的文件是如何命名的？ header.scss 或 _header.scss ？因为它不应该连接它们
对不起，他们被命名为_header.scss。我已经更新了问题。
_header.scss 和 _ 意味着它需要在另一个 sass 文件中导入。如果您在没有_ 的情况下命名文件，它将编译这两个文件。

标签： css sass gulp gulp-sass node-sass

【解决方案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'))
});

【讨论】：