将文件夹中的所有 SASS 文件编译为单个 CSS 文件

Question

我有一个包含 sass 文件的子文件夹。我想将这些文件编译成一个名为 client-styles.css 的 css 文件，该文件将存储在同一个文件夹中。

我有一个gulpfile 设置，它通过modules 文件夹查找子文件夹和其中的sass 文件并将这些sass 文件编译成css（将它们存储在同一个文件夹中）。

我要编译的文件夹名为client-styles。这是我的文件夹结构：

theme
   - assets
      - src
         - sass
           - client-styles
              - _buttons.scss
              - _typography.scss
              - _core.scss
           - config
              - _mixins.scss
              - _grid.scss
              - _variables.scss
         - styles.scss
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (this file is created when running gulp)
   gulpfile.js

Gulp 正确编译了我的模块 css 文件，但在我当前的设置下，我的 client-styles.css 没有任何编译

这是我目前的gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');

var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}

function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}

exports.scss = scss

var themeStyles = {
    styles: {
        src: 'assets/src/sass/client-styles/*.scss',
        dest: 'sass'
    }
}

function themescss() {
    return gulp.src(themeStyles.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(themeStyles.styles.dest));
}



function watch() {
    scss();
    themescss();
    gulp.watch(paths.styles.src, scss);
    gulp.watch(themeStyles.styles.src, scss);
}

exports.watch = watch;

我离得远吗？

编辑：

styles.scss

@import "config/grid.scss";  
@import "config/mixins.scss";  
@import "config/variables.scss";  

编辑 2

已将我的文件夹结构稍微更新为以下内容

theme
   assets
      src 
        sass
           config
              _variables.scss
              _mixins.scss
              _grid.scss
           client-styles
              _core.scss
              _buttons.scss
              _typography.scss
         _config.scss
         styles.scss

_config.scss

@import "config/grid.scss";  
@import "config/mixins.scss";  
@import "config/variables.scss";

我有这个文件的原因是我可以使用@import "../../assets/src/sass/config.scss"; 在另一个文件中使用vars 和mixins（比如hero.scss）。

styles.scss

@import "client-styles/buttons";
@import "client-styles/typography";
@import "client-styles/core";

最新gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');

// for module scss build

var paths = {
    styles: {
        src: 'modules/**/*.scss',
        dest: 'modules'
    }
}

function scss() {
    return gulp.src(paths.styles.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(paths.styles.dest));
}

exports.scss = scss;

// for theme sass build

var themeStyles = {
    stylestheme: {
        src: 'assets/src/client-styles/*.scss',
        dest: 'sass'
    }
}

function themescss() {
    return gulp.src(themeStyles.stylestheme.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(themeStyles.stylestheme.dest));
}

exports.themescss = themescss;


// watch

function watch() {
    scss();
    themescss();
    gulp.watch(paths.styles.src, scss);
    gulp.watch(themeStyles.stylestheme.src, scss);
}

exports.watch = watch;

测试：

已经注释掉了第一个监视任务，看看它是否会改变事情。不工作。仍然没有使用客户端样式文件夹 scss 创建 css 文件。

Gulpfile.js 供参考：

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');


var themeStyles = {
    stylestheme: {
        src: 'assets/src/client-styles/*.scss',
        dest: 'assets/src/sass'
    }
}

function themescss() {
    return gulp.src(themeStyles.stylestheme.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest(themeStyles.stylestheme.dest));
}

exports.themescss = themescss;

// watch

function watch() {
    themescss();
    gulp.watch(themeStyles.stylestheme.src, themeStyles);
}

exports.watch = watch;

Answer 1

轻松解决您的配置问题，就是在您的 styles.scss 附近添加新文件 client-styles.scss，其中包含以下内容：

@import "client-styles/buttons";
@import "client-styles/typography";
@import "client-styles/core";

在themeStyles函数中修改路径：

var themeStyles = {
  styles: {
    src: 'assets/src/**/*.scss',
    dest: 'assets/src/sass'
  }
}

此更改将为您提供 2 个 css 文件，一个是 styles.css，第二个是 client-styles.scss。

另外，我强烈建议您查看7 in 1 pattern - 当我开始使用 Scss 编写样式时，它为我节省了很多时间；）

祝你好运！

附注默认情况下，Gulp 只会提取名称中没有下划线的文件：style.scss - 是的，_style.scss - 不。所以最好只包含 1 个我们想要包含所有项目样式的文件。