SCSS 变量未跨文件加载答案

【问题标题】：SCSS Variables not loading across filesSCSS 变量未跨文件加载
【发布时间】：2021-02-17 08:11:28
【问题描述】：

我有一个文件夹，其中包含我想使用 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";

【问题讨论】：

标签： css sass gulp gulp-sass

【解决方案1】：

在你的情况下，有两件事要告诉 >>>

首先：要解决您的问题，您只需要编译一个已经导入所有其他 scss 文件的文件（main.scss）

second: 以 (_) 开头的 scss 文件，在 gulp-sass 中编译时被忽略，这就像告诉 gulp-sass 编译器这些文件仅用于导入。

【讨论】：

【解决方案2】：

试试这个：

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

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

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

【讨论】：