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

g52tjvyc  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(212)

我试图将一组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'文件编译到'core.css'中,该文件将位于sass文件夹下:
主题-资产-源- sass -配置- _网格系统.scss - _变量.scss - _客户端样式.scss - _排版.scss -样式. scss -核心. css(此处为新文件)

9jyewag0

9jyewag01#

您可以创建一个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

相关问题