Gulp: Compile SASS to CSS in the same folder - css

Question

I'm trying to set up a modular workflow where, when running gulp, it will compile SASS files in a folder to CSS. Those new CSS files will be stored in the same folder.
For example, here's my current folder structure:
theme
- modules
- hero
- hero.html
- hero.scss
Here is my 'gulpfile.js':
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task( 'sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/**/*.css'))
});
However, when running gulp sass, this is what my folder structure looks like:
theme
- **
- *.css
- hero
- hero.css
- modules
- hero
- hero.html
- hero.scss
Whereas what I'm after is:
theme
- modules
- hero
- hero.html
- hero.scss
- hero.css (hero.css to appear here after running gulp)
Am I far off?

Answer 1

If I understand correctly you want to return .css file where .scss file exist. Here is the gulpfile.js code.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss()
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
package.json file need devDependencies and browserlist. it will be like this.
"devDependencies": {
"autoprefixer": "^9.7.4",
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2"
},
"browserslist": [
"last 71 version"
],
use $ gulp watch running your task.
Your folder structure like this
Themes
modules
hero
hero.html
hero.scss
header
header.html
header.scss
footer
footer.html
footer.scss
package.json
gulpfile.js
It will return
Themes
modules
hero
hero.html
hero.css
hero.scss
header
header.html
header.css
header.scss
footer
footer.html
footer.css
footer.scss
package.json
gulpfile.js
Hope this help!

Answer 2

gulp.dest() only wants a path, it will then append the current file path to it. And sass() will already have changed the extension to css so that shouldn't be a problem either. So in your case it should work like this.
gulp.task('sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/'));
});

Answer 3

gulp.src tells the Gulp task what files to use for the task,
while gulp.dest tells Gulp where to output the files once the task is completed.
So in your case it should work like this
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task( 'sass', function() {
return gulp.src('modules/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('modules/**'))
});