0

I am a beginner and have completed my HTML & CSS. For Sass, I am trying to set-up a dev environment and for some reason the gulpfile.js code appears to be OK, but when the task is run (gulp style) then it doesn't output a CSS file. There are no errors either on the command line.

I have installed gulp, gulp cli, gulp-sass and browser-sync

$npm install gulp -global

$npm install gulp cli

$npm install --save-dev gulp gulp-sass browser-sync

Her's my code:

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

async function style() {
  gulp.src('./scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css/'));
}

exports.style = style;

The folder structure for the project is as mentioned below:

_
|-- node_modules
|-- src
 |-- scss
   |-- style.scss
 |-- gulpfile.js
 |-- index.html
 |-- package-lock.json
 |-- package.json
Karthik
  • 1
  • 1
  • Your `./scss/*.scss` files should be located relative to where your gulpfile.js is located. See https://stackoverflow.com/questions/21806925/get-the-current-file-name-in-gulp-src for how to see which, if any, files are actually gong through your `style` task. Also does it work if you remove the `async` keyword? – Mark Jun 01 '19 at 22:11
  • I tested your code - there is nothing wrong with it - that is why I suspect you may not have the proper `gulp.src` glob pointing to where your `scss` files are. – Mark Jun 01 '19 at 22:19
  • Mark, Thank you for your the help. I have now included a folder structure to my original question. With respect to the location of the gulpfile.js I think ./scss/style.scss is correct. – Karthik Jun 02 '19 at 07:06
  • change to gulp.src('src/scss/**/*.scss') – Jinu Kurian Jun 06 '19 at 05:41
  • @Karthik, I ran your code as is and it works perfectly. => `src/css/style.css` What do you get if you run `gulp --tasks`? It should indicate your `style` task And what do you get for `gulp -v`? – Mark Jun 09 '19 at 05:20
  • Could you help me with this plez: https://stackoverflow.com/questions/57132828/gulp-is-not-including-bower-componentss-scss-files-in-my-theme – Adarsh Khatri Jul 22 '19 at 13:04

1 Answers1

2

as your folder structure

change gulp.src like below 

 gulp.src('./src/scss/**/*.scss')

Hope this will helps..!!

DeC
  • 2,226
  • 22
  • 42