SCSS变量无法跨文件加载

时间:2020-11-04 15:50:49

标签: css sass gulp gulp-sass

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

2 个答案:

答案 0 :(得分:1)

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

首先:要解决您的问题,您只需要编译一个已经导入所有其他scss文件的文件(main.scss)

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

答案 1 :(得分:0)

尝试一下:

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

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

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