大佬教程收集整理的这篇文章主要介绍了css – 如何使用Gulp在不同目录中编译SASS文件?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我首先遇到了这个错误TypeError:path.join的参数必须是字符串
找到了this answer,这是因为我使用的是源代码和gulp-sass,建议使用gulp-ruby-sass.
接下来,我尝试使用以下语法编译所有SASS文件:
gulp.task('sass',function () { return sass('public/_sources/sass/**/*.scss',{ style: 'compressed' }) .pipe(sourcemaps.init()) .pipe(concat('bitage_public.css')) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('public/_assets/css')) .pipe(livereload()); });
哪个产生了这个错误:
gulp-ruby-sass stderr:Errno :: ENOENT:没有这样的文件或目录 – public / _sources / sass / ** / * .scss
然后我在答案中注意到我发现作者写道,尚未支持地球仪**:
另外请记住,在撰写本文时,使用gulp-ruby-sass 1.0.0-alpha时,还不支持globs.
我做了更多的挖掘,并找到了一种方法来使用数组来指定我的SASS文件的路径,所以我尝试了以下内容:
gulp.task('sass',function () { return sass(['public/_sources/sass/*.scss','public/_sources/sass/layouts/*.scss','public/_sources/sass/modules/*.scss','public/_sources/sass/vendors/*.scss'],{ style: 'compressed' }) // return sass('public/_sources/sass/**/*.scss',{ style: 'compressed' }) .pipe(sourcemaps.init()) .pipe(concat('bitage_public.css')) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('public/_assets/css')) .pipe(livereload()); });
但我仍然得到Errno :: ENOENT:没有这样的文件或目录,它列出了我放入该数组的所有目录.
如何使用gulp在多个目录中编译SASS?
SASS源文件夹结构:
_sources layouts ...scss modules ...scss vendors ...scss main.scss
不是100%,仍然不确定为什么多路径数组不起作用.
无论如何,所以我忘了在我的主web.scss文件中我已经设置了多个import语句:
@import "vendors/normalize"; // Normalize stylesheet @import "modules/reset"; // Reset stylesheet @import "modules/base"; // Load base files @import "modules/defaults"; // Defaults @import "modules/inputs"; // Inputs & Selects @import "modules/buttons"; // Buttons @import "modules/layout"; // Load Layouts @import "modules/svg"; // Load SVG @import "modules/queries"; // Media Queries
所以我实际上并不需要按照我尝试的方式尝试使用Gulp,我只需要直接定位该.scss文件.所以我在这做了:
// Compile public SASS gulp.task('sass',function () { return sass('public/_sources/sass/bitage_web.scss',{ style: 'compressed' }) .pipe(sourcemaps.init()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('public/_assets/css')) .pipe(livereload()); });
现在它可以工作,因为它看到了一个特定的文件来定位和编译
以上是大佬教程为你收集整理的css – 如何使用Gulp在不同目录中编译SASS文件?全部内容,希望文章能够帮你解决css – 如何使用Gulp在不同目录中编译SASS文件?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。