Css 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口

我对Gulp按照我在sass文件中口述的顺序编译我的sass有问题

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

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

@import 'mobile';

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

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

然而，在my styles.css中，它在my_desktop.scs之后注入my_tablet.scs，这导致我的tablet断点覆盖我的桌面断点

@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
    }
}

这是我的吞咽文件：

// 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以正确的顺序编译了该组件。我们已经对代码运行了很多次，但是没有明显的原因说明为什么这个组件被编译出错误的顺序。它的结构与我们的其他组件完全相同。

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

---

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

您的**/*.SCSS通配符按字母顺序拾取文件夹和文件，因此，将在.dStopto.SCSS之后放置.Tabel.SCSS。如果你有一个general-page.scss文件，那么听起来你好像复制了.scss内容。为什么你需要包含所有的.scss文件。

app/styles.scss的内容是什么？@Sudheer每个组件，比如上面的一个，都被编译成一个components.scss文件，然后该文件被编译成styles.scss文件。这是代码：

@import'sass/global/global'@导入“sass/组件/组件”这与其说是回答，不如说是评论，但使用基于组件的方法来组织您的Sass将有助于消除订购Sass导入的需要，并且您可以在每个组件中为响应性设计包含媒体查询混合。