recursive paths for libsass
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' ...
Gulp-sass not finding variable in included files(s)?
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...
Understand Gulp pipe order
javascript,node.js,gulp,gulp-sass,gulp-preprocess
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...
Building Ionic Sass using Compass still looking for Removed Sass task
sass,gulp,ionic,gulp-sass,gulp-compass
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...
gulp-sass @import CSS file
Passing some parameters to minifyCSS allows me to achieve this. .pipe(minifyCSS({ relativeTo: './bower_components', processImport: true })) Sources: gulp-minify-css depends on clean-css, referenced options explained here....
Media queries don't do anything
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...
Watch multiple directories using gulp-sass
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...
Gulp: Object # has no method 'isNull'
javascript,gulp,gulp-sass,gulp-concat
This was due to accidentally using an old version of gulp (3.0.0 vs 3.8.10), which was incompatible with gulp-concat and gulp-sass. Upgrading to version 3.8.10 resolved the issue.
Sass Sourcemap with Chrome DevTools
google-chrome,source-maps,gulp-sass,gulp-sourcemaps
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...
cannot find module “lodash”
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...
SCSS variables - same name, different value in different media breakpoints
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.dest() ignoring subdirectory
You should have a look at gulp-rename Try: var gulp = require('gulp'); //Plugins var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var sourcemaps = require('gulp-sourcemaps'); var rename = require('gulp-rename'); var scssPath = './public_html/scss/**/*.scss'; var cssPath = './public_html/css/'; //Compile Styles gulp.task('CompileSASS', function () { gulp.src(scssPath) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(autoprefixer()) .pipe(sourcemaps.write()) //-------- .pipe(rename({dirname:...
Gulp command stops with Error: spawn ENOTDIR
I rolled back to Node v0.10.31 and all is well.
How to change SASS path variable using Gulp?
You could try using the Gulp replace package if you have no alternative built in option with a Gulp file that came with the sass file. https://www.npmjs.com/package/gulp-replace...
Gulp sass watch Missing property value with *.scss
sass,gulp,gulp-watch,gulp-sass
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...
gulp-sass wont import bootstrap installed with bower
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...
Gulp-sass will not compile to CSS
If you want the sass task to execute when you run gulp from the command-line, add it as a dependency of the default task: gulp.task('default', ['sass'], function() { //other stuff }); ...
Gulp condition inside pipe
Use the gulp-if plugin: var gulpif = require('gulp-if'); g.task('sass', function() { return g.src(sources.sass) .pipe(changed(output.css)) .pipe(sass({style:'compressed', sourcemap:true})) // Conditional output .pipe(gulpif(condition1, g.dest(output.css))) .pipe(gulpif(condition2, g.dest(output.css2))) .pipe(notify('scss converted to css and compressed <%= file.relative %>')); }); ...
If gulp is watching conditional
How about: gulp.task('styles', function(){ var destPath = isWatching ? '.tmp/css/' : 'dist'; return gulp.src('sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest(destPath)); }); ...
Gulp ruby-sass and autoprefixer do not get along
sass,gulp,gulp-sass,autoprefixer
Instead of: browsers: ['last 2 versions'], Try this: browsers: ['last 2 version'], If that doesn't work, I've had better luck with gulp-sass and gulp-sourcemaps. // Compile Sass & create sourcemap .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write()) .pipe(gulp.dest('css')) // Autoprefix, load existing sourcemap, create updated sourcemap .pipe(sourcemaps.init({loadMaps: true})) .pipe(autoprefixer('last 2 version') .pipe(sourcemaps.write('./')) .pipe(gulp.dest('css')) ...
Gulp configuration not working
gulp,gulp-watch,gulp-sass,gulp-concat,gulp-uglify
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({...
Cannot overwrite SASS !default variable?
javascript,sass,gulp,gulp-sass
Create a main.scss file like this: @import "app/assets/vendor/open-sans-fontface/open-sans.scss"; @import "app/assets/_variables.scss"; Then update the your files array to only include the main file: gulp.task('css', function () { return gulp.src(['app/assets/main.scss']) .pipe(sass()) .on('error', function (err) { console.log(err.message); }) .pipe(gulp.dest('public/css')); }); ...
issue with piping gulp-watch into gulp-ruby-sass
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...
Gulp SASS Task No longer 'Watches' Since Adding Media Queries
css,sass,gulp,gulp-watch,gulp-sass
Looks like your configuration wasn't doing anything except running sass only when styles.scss changed. Gulp watch needs the files to watch, and the process to run - gulp.watch([source], [task]); Try this below. // Watch Files For Changes gulp.task('watch', function() { gutil.log("Watching your files...") gulp.watch(paths.js, ['scripts']); gulp.watch('assets/css/*.scss', ['sass']); }); ...
Appending the parent selector to the end generates the incorrect result with Elixir/Libsass
laravel,sass,gulp-sass,laravel-elixir,libsass
This appears to be a bug with Libsass, which is what gulp-sass compiles with. If you want to get the correct results, you'll need to switch to using the Ruby compiler for Sass.