SCSS变量无法跨文件加载

问题描述

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

解决方法

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

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

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

,

尝试一下：

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

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

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