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編譯爲相對子文件夾

回答

相關問題