如何解决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文件中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。