SCSS 變量未跨文件加載

Question

我有一個文件夾，里面有我想要使用 gulp 編譯成 .css 文件的所有 .scss 文件。 我的 gulpfile.js 看起來像這樣：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass',
            function (){
              return gulp.src('css/modules/*.scss')
              .pipe(sass())
              .pipe(gulp.dest('css'))
            }
);

當我運行 gulp sass 命令時，我收到一個錯誤，即在 blocks.scss 中未定義變量 ($med-green)。 它在 base.scss 中定義，它首先被編譯，因為它是按字母順序編譯的（我最終得到了一個 base.css 文件）。 main.scss 文件在 css 目錄中，所有其他文件都在 css/modules 目錄中，所以我知道路徑是正確的。 如何讓變量對所有 .scss 文件可見？ 我錯過了什么？

我還有一個 main.scss 文件，用於導入我所有的 .scss 文件。 如果我可以使用它將它們編譯成 1 個 .css 文件（這是最終目標），那就太好了。 當我嘗試這樣做時，我收到錯誤“錯誤：找不到帶有單數 glob 的文件”。 main.scss 文件看起來像這樣，其中 modules 是 css 的子文件夾，我的 main.scss 文件所在的位置。

@import "./modules/_reset.scss";
@import "./modules/_base.scss";
@import "./modules/_header.scss";
@import "./modules/_footer.scss";
@import "./modules/_blocks.scss";
@import "./modules/_interviews.scss";
@import "./modules/_search.scss";

Answer 1

在你的情況下，有兩件事要告訴>>>

第一：要解決您的問題，您只需要編譯一個已經導入所有其他 scss 文件的文件 (main.scss)

第二：以 ( _ ) 開頭的 scss 文件，在 gulp-sass 中編譯時會被忽略，就像告訴 gulp-sass 編譯器這些文件僅供導入一樣。

Answer 2

試試這個：

return gulp.src('css/main.scss')

在你的sass任務中。 您不希望每個modules/*.scss文件都有單獨的 css 文件，這就是部分和導入的重點 - 您只需要一個main.scss ，它將它們全部導入。 個別地，一個文件將看不到另一個的變量，因為它們中的每一個都不會導入所有其他變量。

您只希望最后的main.css包含在您的 html 文件中。