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 from Rahul on Stack Overflow Top answer 1 of 3
3
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!
2 of 3
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/'));
});
npm
npmjs.com › package › gulp-sass
gulp-sass - npm
March 5, 2025 - For example, to compress your CSS, ... }; exports.buildStyles = buildStyles; gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the Sass-to-CSS compilation....
» npm install gulp-sass
Published Mar 05, 2025
Version 6.0.1
Author David Manning
Repository https://github.com/dlmanning/gulp-sass
Converting scss to css using gulp. [Problems]
This is my scss file, not sure if thats useful to know. ... Workspace. Any help is appreciated! ... You are missing a trailing slash in gulp.dest('app/css'), causing gulp to write to file named css in the app folder. More on stackoverflow.com
Why doesn't Gulp seem to recognise changes in my compiled .css files? (x-post r/wedev)
The issue is how youve set up the gulp file, basically the way gulp works is it will try to run tasks concurrently, not sequentially, unless told otherwise. So the deploy task is run before the sass task completes so it wont see any chages yet. You need to add a watch task then configure the task depencies to make every run/wait in order. Im on mobile so I aint gonna explain much, instead the gist linked below is what your gulp file should resemble. The square brackets contain the task depencies I mentioned, tells one task to wait until whatever tasks defined here are complete before starting. I leave the rest to you and google to get an actual explanation of whats happening here, Task names are different but youll get the idea : https://gist.github.com/arysom/9ab1bfd670d0be1e8899ac45ea6b432f More on reddit.com
10
20
December 8, 2018Attempting to compile Sass via Gulp, task runs but no CSS file is made.
I think you are missing return before gulp.src
More on reddit.com 21
31
May 30, 2012Gulp scss to css is way to slow
Thanks for this post, had fully forgotten that gulp existed and now i feel slightly nostalgic. Used it at my first job :) More on reddit.com
17
2
April 19, 2024Videos
Medium
sanmancreations.medium.com › how-to-convert-scss-to-css-files-using-gulp-ddcc711a091d
How to convert SCSS to CSS files using Gulp? | by Sanman Mandlik | Medium
September 6, 2023 - In this structure, your SCSS files reside in the src/scss/ directory, and the converted CSS files will be saved in the dist/css/ directory. Now, let’s set up Gulp in your project to convert SCSS to CSS.
ZetCode
zetcode.com › gulp › sass
Gulp Sass - compiling Sass to CSS with gulp-sass plugin
October 18, 2023 - Gulp Sass tutorial shows how to compile Sass to CSS with gulp-sass plugin.
YouTube
youtube.com › watch
Gulp 4: How to Compile SASS / SCSS to CSS - YouTube
In this video I’m going to show you how to compile (convert) SASS/SCSS files to CSS and then, minify (minimize) and bundle (combine) generated CSS files into...
Published September 17, 2020
SymfonyCasts
symfonycasts.com › screencast › gulp › sass
Sass to CSS > Gulp! Refreshment for Your Frontend Assets
Gulp works with streams, so imagine ... of our .scss files as a big stream and then passing them one-by-one through the pipe() function. So at this point, all that Sass has been processed.
Code Hangar
codehangar.io › gulp-sass
Compiling SASS/SCSS to CSS with Gulp - Code Hangar
November 12, 2016 - Once you have installed Gulp and understand the basics of creating tasks, you can start using Gulp to do real work! (If you need help installing Gulp, go back and read Getting Started with Gulp Javascript Task Runner.) In this tutorial we will use Gulp to compile SASS, SCSS or LESS to CSS, watch our files, and recompile them any time changes are detected.
YouTube
youtube.com › watch
How to use Gulp to compile SCSS into CSS - YouTube
A quick video on how to compile SASS to CSS with Gulp. This was done in a Local by Flywheel environment, but it should work in any kind of local environment....
Published June 22, 2022
Chrispennington
chrispennington.blog › blog › 20201219-compile-and-minify-scss-with-gulpjs-in-hugo
Compile and Minify SCSS with Gulpjs in Hugo
December 19, 2020 - With GulpJS, you can automatically compile, prefix, minify, and rename your SCSS to CSS.
GitHub
gist.github.com › sgnl › 2937a3f5767a7f1b765c
Setting up SASS (SCSS) files with gulp, gulp-sass, and Browser Sync! · GitHub
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var sass = require('gulp-sass'); // Static Server + watching scss/html files gulp.task('serve', function() { browserSync.init({ server: "./public" }); gulp.watch("scss/**/*.scss", ['sass']); gulp.watch("public/*.html").on('change', browserSync.reload); }); // Compile sass into CSS & auto-inject into browsers gulp.task('sass', function() { return gulp.src("scss/styles.scss") .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest("public/css")) .pipe(browserSync.stream()); }); gulp.task('default', ['sass', 'serve']);
Stack Overflow
stackoverflow.com › questions › 38781045 › converting-scss-to-css-using-gulp-problems
Converting scss to css using gulp. [Problems]
I have been trying to convert scss to css and this is my code. var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function() { return gulp.src('app/scss/styles.scss') .pipe(sass()) .pipe(gulp.dest('app/css')); });
Yannick Pereira-Reis
ypereirareis.github.io › blog › 2015 › 10 › 22 › gulp-merge-less-sass-css
How to merge less, scss and css into a single css file with gulp – Yannick Pereira-Reis
var gulp = require('gulp'); var sass = require('gulp-sass'); var less = require('gulp-less'); var concat = require('gulp-concat'); var minify = require('gulp-minify-css'); var merge = require('merge-stream'); To do this we need to have multiple steps inside the gulp task. ... gulp.task('build/admin', function() { var lessStream = gulp.src([...]) .pipe(less()) .pipe(concat('less-files.less')) ; var scssStream = gulp.src([...]) .pipe(sass()) .pipe(concat('scss-files.scss')) ; var cssStream = gulp.src([...]) .pipe(concat('css-files.css')) ; var mergedStream = merge(lessStream, scssStream, cssStream) .pipe(concat('styles.css')) .pipe(minify()) .pipe(gulp.dest('web/css')); return mergedStream; });
Adobe Developer
developer.adobe.com › commerce › frontend-core › guide › css › custom-preprocessor › gulp-sass
Sass Preprocessor and Gulp | Commerce Frontend Development
var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber'), notify = require('gulp-notify'); var config = { src : './web/css/*.scss', dest : './web/css/' }; // Error message var onError = function (err) { notify.onError({ title : 'Gulp', subtitle: 'Failure!', message : 'Error: <%= error.message %>', sound : 'Beep' })(err); this.emit('end'); }; // Compile CSS gulp.task('styles', function () { var stream = gulp .src([config.src]) .pipe(plumber({errorHandler: onError})) .pipe(sass().on('error', sass.logError)); return stream .pipe(gulp.dest('./web/css/')); });
npm
npmjs.com › package › gulp-css-scss
gulp-css-scss - npm
Gulp plugin for converting CSS to Scss. Latest version: 0.1.0, last published: 10 years ago. Start using gulp-css-scss in your project by running `npm i gulp-css-scss`. There are 15 other projects in the npm registry using gulp-css-scss.
» npm install gulp-css-scss
Published Oct 30, 2015
Version 0.1.0
Author John Otander
Repository https://github.com/johnotander/gulp-css-scss
CSS-Tricks
css-tricks.com › gulp-for-beginners
Gulp for Beginners | CSS-Tricks
August 16, 2024 - Sometimes we need the ability to compile more than one .scss file into CSS at the same. We can do so with the help of Node globs. FYI: Gulp-sass uses LibSass to convert Sass into CSS. It’s much quicker than Ruby-based methods.
Medium
jhinter.medium.com › setting-up-gulp-to-compile-scss-in-less-than-5-minutes-fee8bea2b68b
Setting up GULP to compile SCSS in less than 5 minutes | by J Hinter | Medium
October 22, 2019 - 💪 After following my tutorial, you will be able to compile all your SCSS files to one single CSS file. ... 'use strict';var gulp = require('gulp'); var sass = require('gulp-sass'); var concat = require('gulp-concat');sass.compiler = require('node-sass');gulp.task('sass', function () { return gulp.src('./sass/**/*.scss') .pipe(concat('custom.scss')) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./dist/'));});
MicroPyramid
micropyramid.com › blog › how-to-use-gulpjs-to-minify-css-js-and-convert-less-scss-to-css
How to use gulpjs to Minify css, js and convert less, scss to css | MicroPyramid
Gulp is a task runner which uses Node.js. For example concats javascript and CSS, minifies CSS and javascript.
npm
npmjs.com › package › gulp-scss
gulp-scss - npm
July 1, 2016 - I found gulp-sass, but it doesn't seem to support actual sass, because the backend, node-sass is a port of libsass that has major limitations. it seems to have the same function of ruby sass now and I recommend to use it. Then, I found gulp-ruby-sass, but there are some major limitations of use (e.g. you can't use file globbing) It's also just simple · gulpfile.js · /*global require*/ (function (r) { "use strict"; var scss = r("gulp-scss"); var gulp = r("gulp"); gulp.task("scss", function () { gulp.src( "home/scss/**/*.scss" ).pipe(scss( {"bundleExec": true} )).pipe(gulp.dest("home/static/css")); }); }(require)); You can specify options by passing it as a parameter object of scss function, as you can see above.
» npm install gulp-scss
Published Jul 01, 2016
Version 1.4.0
Author Hiroaki Yamamoto
Repository https://github.com/forumouth/gulp-scss
GitHub
github.com › dlmanning › gulp-sass
GitHub - dlmanning/gulp-sass: SASS plugin for gulp · GitHub
For example, to compress your CSS, ... }; exports.buildStyles = buildStyles; gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the Sass-to-CSS compilation....
Starred by 1.6K users
Forked by 374 users
Languages JavaScript 93.4% | CSS 3.4% | SCSS 2.9% | Sass 0.3%
Andrew Beeken
andrewbeeken.co.uk › 2018 › 08 › 14 › fun-with-gulp-compiling-and-minifying-sass
Fun With Gulp – compiling and minifying SASS
August 15, 2018 - What we’re going to do is write our sass code into style.scss and have Gulp compile that, spitting out the result into css in a .css and .min.css format so that we can include it in index.html and make our page look pretty.