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

试试这个：

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

在你的 sass 任务中。您不希望每个 modules/*.scss 文件都有单独的 css 文件，这就是部分和导入的要点 - 您只需要一个 main.scss，它将全部导入。单独地，一个文件将看不到另一个文件的变量，因为每个文件都不会导入所有其他文件。

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

Answer 2

对于你的情况，有两点要说明 >>>

第一：为了解决你的问题，你只需要编译一个已经导入所有其他 scss 文件的文件 (main.scss)

第二个：以 ( _ ) 开头的 scss 文件，在 gulp-sass 中编译时被忽略，这就像告诉 gulp-sass 编译器这些文件仅供导入。

SCSS 变量不跨文件加载

SCSS Variables not loading across files

css

sass

gulp

gulp-sass