Half guess: Imports work fine but node-sass doesn't support maps that came with Sass 3.3. https://github.com/sass/node-sass#reporting-sass-compilation-and-syntax-issues The libsass library is not currently at feature parity with the 3.2 Ruby Gem that most Sass users will use, and has little-to-no support for 3.3 syntax. While we try our best to maintain...

It seems the "solution" is to use gulp-sass for this instead of gulp-ruby-sass. I still do not know why gulp-ruby-sass doesn't support this since piping the results of gulp.src() into and out of gulp-ruby-sass works like a champ, but it doesn't. I wonder if gulp-watch returns a different file format...

Why it doesn't work when preprocessing first: The issue relates how the sass files are referenced when compiled. Since style.sass imports partials/variables this file is referenced outside the stream and it will retrieve the original (not preprocessed) file. Why it works preprocessing after: Since the compiled .css still have the...

My problem turned out to be that main-bower-files gives you the files, not the directories. Duh. Node-sass needs the directory containing the importable files. So I have to modify my load_paths a little bit. for (var i=0; i<load_paths.length; i++){ // we need to use the parent directories of the main...

You need to provide the relative path to the sass files that you're importing. So change the import code to be something like this: @import "forms"; @import "../../common/styles/_mixins"; @import "../../common/styles/_common"; Then, since you are importing the files from ./common/styles you should only need gulp to target the scss file in...

The problem was actually in my sass file. If my include path is ./project/components/controls/ and the sass file lives at ./project/components/controls/selectAgencies/_selectAgencies.scss then my .scss file should reflect the rest of the path, like so: @import 'selectAgencies/selectAgencies' ...

Tests are usually your best bet. Make sure your media queries are at the bottom most of your prioritized CSS file - to ensure they aren't being overwritten. Regardless how many thousand lines your code is: 1) Comment out all your media queries 2) Run a test, for example: @media...

Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces. I had a the same problem. I had to scratch my head for a whole day to...

Rename the task to sass instead of compass. Ionic has some built in sass features that assume the gulp task is named sass to support live reload. This is helpful when using ionic serve to preview your app and changing any of the styling can be pushed into the browser...

Ruby Sass is correct. Your value should be 0. LibSass has a tendency to behind in features and behavior. It is emulating the behavior of Sass 3.3, which freely has access to global variables from within mixins/functions. There isn't a way to do this that will work with both Sass...

gulp-ruby-sass changed it's API recently. So you can't pipe something through to the Sass task, but rather need to start with it. Much like browserify does. gulp-ruby-sass creates a stream, though, so the rest of the pipe should work fine: gulp.task('styles', function() { return sass(PATH.SRC.SASS, { style: 'expanded' }) .pipe(autoprefixer({...

Be shure to install lodash in the required folder. This is probably your C:\gwsk directory. If that folder has a package.json file, it is also best to add --save behind the install command. $ npm install lodash --save The package.json file holds information about the project, but to keep it...

The issue here is that your *.scss glob takes everything with no special order. So the _theme.scss file could be picked first, and because it's using variables from the _imports.scss one that's not processed yet, you've got the error. To prevent this, you could use an array specific pattern to...