Gulp将SASS编译为相对子文件夹

如果我有一个components/root/sass/index.scss以内的文件，我该如何将它编译为components/root/styles/index.css？简而言之，我想用styles代替sass，即如果我有一个文件在components/second/sass/file.scss，它会编译为components/second/styles/file.css。Gulp将SASS编译为相对子文件夹

这是我当前的代码在gulpfile.js：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

gulp.task('sass', function() { 
    return gulp.src('components/**/sass/*.scss', {base: "./"}) 
    .pipe(sass()) 
    .pipe(gulp.dest('../styles/')); 
}) 

gulp.task('default', function() { 
    gulp.watch('components/**/sass/*.scss', ['sass']); 
});

来源

2016-11-05 think123

重命名每个路径替换“/上海社会科学院”位，它是通过“吞掉，重命名”模块扩展。

我建议让变量中的路径通过，作为独立任务的手表以及具有“sass”和“watch”任务的默认任务。

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var rename = require("gulp-rename"); 

var componentsGlob = './components/**/sass/*.scss'; 

gulp.task('sass', function() { 
    return gulp.src(componentsGlob) 
    .pipe(sass()) 
    .pipe(rename (function(path) { 
     path.dirname = path.dirname.replace('/sass', '/styles'); 
     path.extname = ".css"; 
    })) 
    .pipe(gulp.dest('./components/')); 
}); 

gulp.task('watch', function() { 
    gulp.watch(componentsGlob, ['sass']); 
}); 

gulp.task('default', ['sass', 'watch']);

来源

2016-11-05 04:23:37 ElMesa

感谢您的回复，但它将它放在'styles/index.css/index.css'文件中？ – think123

我刚刚编辑了一个使用gulp-rename模块的解决方案，因为它看起来更适合“吞噬方式”，你可以试试这个吗？ – ElMesa

我尝试了“components/root/sass/index.scss”并获取“components/root/styles/index.css”。如果它不起作用分享有问题的例子来尝试不同的替代品。 – ElMesa

无需一饮而尽，重命名：

gulp.task('sass', function() { 
    return gulp.src('components/**/sass/*.scss') 
    .pipe(sass()) 
    .pipe(gulp.dest('components/root/styles')); 
})

基本上，“组件/根/风格”将你的src水珠开始前更换任何东西，或者，你的情况，“组件”。

来源

2016-11-06 06:00:57 Mark

不，因为如果我在'components/abc/sass /'里面有东西，那么它就不会编译成components/abc/styles /'。 – think123

你说得对。那不是你的问题。 – Mark

对不起，如果我不清楚，我已编辑我的问题，包括澄清。你还介意更新你的答案，只是为了确保这个问题的质量？ – think123

Gulp将SASS编译为相对子文件夹

回答

相关问题