时间戳

首页 > 解决方案 > 将子文件夹中的所有文件从 SASS 编译为 CSS

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

问题描述

我正在尝试将一组 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' 中：

主题 - 资产 - src - sass - 配置 - _grid-system.scss - _variables.scss - _client-styles.scss - _typography.scss -styles.scss - core.css（此处为新文件）

标签： csssassgulpgulp-sass

解决方案

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

推荐阅读