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
请先登录再写评论。
PS I'm running a brand new computer with 12GB ram and an intel i7 processor. Most operations in phpstorm are not slow.
How did you setup your compiler? wich compiler do you use?
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!
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
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:
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