Answers for "compile scss to css"

2

linux install sass

sudo npm install -g sass
Posted by: Guest on October-29-2020
-1

how to compile scss to css

// Install node-sass
npm i node-sass

// In package.json:  
"scripts": {
	  ...
      "scss": "node-sass — watch scss -o css"
}

// Run the compilation
npm run scss
Posted by: Guest on April-25-2021
0

compile scss

//in gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task("stylesReturn", function () {
    return gulp
    .src("sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"));
});


//or
gulp.task('stylesDone', function(done) { //use the callback
   gulp
    .src("sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"));
  done(); 
});


gulp.task('stylesPromise', function() { 
  return new Promise(function(resolve, reject) {
   gulp
    .src("sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"));
   resolve();
  });
});

gulp.task('stylesAsync', async function() {
   gulp
    .src("sass/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./css/"));
});

//or

gulp.task('styleEmitter', function() {
    var e = new EventEmitter();
    e.on('runstyle', 
    function(msg) { 
        gulp.task("stylesReturn", function () {
            return gulp
            .src("sass/**/*.scss")
            .pipe(sass().on("error", sass.logError))
            .pipe(gulp.dest("./css/"));
        });
        console.log(msg);
    setTimeout(() => { e.emit('runstyle', 'My message'); 
    e.emit('finish'); });
    return e;
  });
  
//or you could spin up a kubernetes image of a vax pdp11 on elastic beanstalk

  gulp.task('default',function() {
  gulp.watch('sass/**/*.scss', gulp.series('stylesKubernetes'));
});
  
gulp --tasks
gulp styles
gulp watch

//specify your s(ca)ss directory and css directory

//gulp.task('styles', function() {
//    gulp.src('sass/**/*.scss')
//        .pipe(sass().on('error', sass.logError))
//        .pipe(gulp.dest('./css/'))
//});
//no that's a lie. You now have to return something

//gulp.task('default',function() {
//    gulp.watch('sass/**/*.scss',['styles']);
//});
//Watch task ... no! thats a lie too. That's SOOooo version 3.x

//** DETAILS

Dir Structure...
--sass
   - style.scss
-- css
package.json
Gulpfile.js
Posted by: Guest on November-15-2020

Browse Popular Code Answers by Language