Gulp 乱序编译 sass答案

【问题标题】：Gulp compiling sass out of orderGulp 乱序编译 sass
【发布时间】：2019-09-05 17:39:29
【问题描述】：

我在 Gulp 编译我的 sass 时遇到问题，我在我的 sass 文件中指定的顺序。

这是我的一个 sass 组件的文件结构示例：

在我的 general-page.scss 文件中，我按以下顺序编译 _desktop.scss、_mobile.scss 和 _tablet.scss：

@import 'mobile';

@media ($bp-tablet) {
  @import 'tablet';
}

@media ($bp-desktop) {
  @import 'desktop';
}

但是，在我的 styles.css 中，它在我的 _desktop.scss 之后注入了我的 _tablet.scss，这导致我的平板电脑断点覆盖了我的桌面断点。

@media (min-width:1140px) {
    .node--type-general-page .hero-headings h1 {
        font-size: 3em
    }
    .node--type-general-page .hero-headings .subhead {
        font-size: 1.3em
    }
    .node--type-general-page .hero,
    .node--type-general-page .hero-background,
    .node--type-general-page .hero-background img {
        height: 250px
    }
}
@media (min-width:768px) {
    .node--type-general-page .hero,
    .node--type-general-page .hero-background,
    .node--type-general-page .hero-background img {
        height: 220px
    }
}

这是我的 gulp 文件：

// Initialize modules
const { src, dest, watch, series, parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');

// File path variables
const files = {
    scssPath: 'app/styles.scss',
    scssSubPaths: 'app/**/*.scss',
    jsPath: 'app/js/*.js'
}

// Sass task
function scssTask(){
    return src(files.scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist')
    );
}

// JS task
function jsTask(){
    return src(files.jsPath)
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist')
    );
}

// Watch task
function watchTask(){
    watch([files.scssPath, files.scssSubPaths, files.jsPath],
        parallel(scssTask, jsTask)
    );
}

// Default task
exports.default = series(
    parallel(scssTask, jsTask),
    watchTask);

我做错了吗？

更新：奇怪的是，我们的其他 sass 组件没有任何问题。例如，我们测试了另一个组件，它与通用页面组件嵌套在同一级别。 Gulp 以正确的顺序编译了该组件。我们已经多次运行代码，但是没有明显的原因导致该组件被乱序编译。它遵循与我们其他组件完全相同的结构。

【问题讨论】：

'app/styles.scss'的内容是什么？
@Sudheer 每个组件，就像上面的那个被编译成一个 components.scss 文件，然后这个文件被编译成 styles.scss 文件。这是代码：@import 'sass/global/global'; @import 'sass/components/components';
这更像是一个评论而不是一个答案，但是使用基于组件的方法来组织你的 Sass 将有助于消除对 Sass 导入排序的需要，你可以在每个中包含一个媒体查询混合响应式设计的组件。

标签： css sass gulp

【解决方案1】：

根据我从有限的信息中收集到的信息，我认为您的 SASS 子路径是按字母顺序编译的。

我会考虑只编译“style.scss”文件并将所有子路径文件导入到主文件中。

【讨论】：

【解决方案2】：

您的 **/*.scss 通配符按字母顺序选择文件夹和文件，因此 _tablet.scss 将放在 _desktop.scss 之后。听起来您复制了 .scss 内容，如果您有一个 general-page.scss 为什么需要包含所有 .scss 文件。

【讨论】：