SCSS compiler slow - 7 seconds for 2100 line SCCS File

Hi there,

Has anyone else found the SCSS compiler to be a quite slow? I have an SCSS file that that takes about 7 seconds to compile 1200 lines of SCSS to a CSS file (granted it also includes the following imports:

@import "scss/reset";
@import "scss/susy";
@import "scss/breakpoint";
@import "scss/css3-mixins";


This is really disrupting my workflow. Can anyone offer any advice on how to optimize phpstorm for this problem or generally? I'm fairly new to phpstorm.

Thanks,

Sebastian

5 comments
Comment actions Permalink

PS I'm running a brand new computer with 12GB ram and an intel i7 processor. Most operations in phpstorm are not slow.

0
Comment actions Permalink

How did you setup your compiler? wich compiler do you use?

0
Comment actions Permalink

Hi. I had the same problem, I think it is because scss compiler is, as far as I know, based on ruby, and that is... slow.
I solved the probelm for me using node.js / grunt -> watch -> scss for grunt, and that works fast!!! Really. I have about 50 @import files and it takes one second or two on a i7 macbook pro. :-) Great!

0
Comment actions Permalink

Adrian - thank you. Yes I was using Ruby to compile the SCSS. I'm having some issues getting grunt to work but if I can't get that sorted I may just try a PHP compiler for SCSS.

Thanks for the advice!

Sebastian

0
Comment actions Permalink

I had the same problem with the PHPStorm watcher and Ruby scss compiler -- it just took way too long and was slowing me down. So, I ditched the PHPStorm file watcher entirely and switched to  using gulp-sass and it's a billion times faster.

Instead of installing gulp and gulp-sass in the specific project (which is not a node project and I don't want to deal with node modules getting uploaded by mistake or explaining to my client why that folder is there), what I did was create a folder called "scss-compiler" in my main Sites folder where I keep all my projects. The idea is I can use it for any project and simply adjust the entry and outout paths. 

I CD'd into the newly-created scss-compiler folder and ran these commands in a terminal:

 

  1. npm init (name the project anything except 'gulp-sass'  and then just hit enter for all the rest of the questions)
  2. npm install --save gulp
  3. npm install --save gulp-sass

Then I created a Gulpfile.js file and pasted this in there:

// contents of Gulpfile.js

'use strict';

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

sass.compiler = require('node-sass');

var entry = '../path/to/your/scss/folder/in/another/project/folder';
var output = '../path/to/your/css/folder/in/another/project/folder';

gulp.task('sass', function () {
return gulp.src(`${entry}/**/*.scss`)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(`${output}`));
});

gulp.task('watch', function () {
gulp.watch(`${entry}/**/*.scss`, ['sass']);
});

 

Then just run 'gulp watch' and you're good to go. 

running 'gulp sass' runs an ala carte immediate compile 

1

Please sign in to leave a comment.