将子文件夹中的所有文件从 SASS 编译为 CSS答案

【问题标题】：Compile all files in subfolder from SASS to CSS将子文件夹中的所有文件从 SASS 编译为 CSS
【发布时间】：2020-07-08 01:17:13
【问题描述】：

我正在尝试将一组 scss 文件编译成一个 css 文件。例如，这是我的文件夹结构：

theme
    - assets
       - src
         - sass
            - config
               - _grid-system.scss
               - _variables.scss
            - _client-styles.scss
            - _typography.scss
         - styles.scss

根据以上内容，我希望将_client-styles.scss 和_typography.scss 编译成一个css 文件。这个新的 CSS 文件将位于同一文件夹中，名为 core.css（位于 sass 文件夹下）。

我设置了gulpfile.js，它将所有.scss 文件编译到同一文件夹中的css 中。但不知道如何处理这种转换，因为我想忽略 styles.scss 文件。

当前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
function watch() {

    scss();

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

styles.scss 长什么样子（供参考）：

@import "config/**.scss";  
@import "client-styles.scss";
@import "typography.scss";

我该怎么做？将 '_client-styles.scss' 和 '_typography.scss' 文件编译到位于 sass 文件夹下的 'core.css' 中：

主题 - 资产 - 源代码 - 萨斯 - 配置 - _grid-system.scss - _variables.scss - _client-styles.scss - _typography.scss - 样式.scss - core.css（这里是新文件）

【问题讨论】：

gulp.src(paths.styles.src,"!") -- 尝试用这个替换

标签： css sass gulp gulp-sass

【解决方案1】：

您可以创建一个core.scss 文件，您将在其中导入子文件夹中的所有 sass 文件，如下所示：

// change the path accordingly    
@import "./sass/**/*.scss";

使用gulp-sass-glob，您可以通过这种方式在gulpfile.js 中使用管道：

'use strict';

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

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

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

    scss();

    gulp.watch(paths.styles.src, scss);
}
exports.watch = watch

【讨论】：