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' ...
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.
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...
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...
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...
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...
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...
I rolled back to Node v0.10.31 and all is well.
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']); }); ...
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 }); ...
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...
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...
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...
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:...
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,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')) ...
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')); }); ...
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({...
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....
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...
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 %>')); }); ...
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...
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...
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...
How about: gulp.task('styles', function(){ var destPath = isWatching ? '.tmp/css/' : 'dist'; return gulp.src('sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest(destPath)); }); ...