I am trying to use gulp-sass to compile my scss files, but for some reason it is failing but not displaying an error message.
This is the command output for gulp styles:
[20:40:04] Requiring external module babel-core/register
[20:40:05] Using gulpfile ~\Documents\Development\Web Applications\webux\webux2\gulpfile.babel.js
[20:40:05] Starting 'styles'...
Here is my gulp task:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', err => {
$.util.log(err);
}))
.pipe(gulp.dest('./tmp/styles'));
});
I get the same output when using $.sass.logError as the error callback.
Related
I'm picking up an error with gulp on Windows 10
Running gulp through git bash works fine, it opens the current project in a new browser tab, but the moment I alter the style.scss file, and save it in atom, this error comes up...
[17:02:54] Starting 'css'...
events.js:183
throw er; // Unhandled 'error' event
^
BrowserslistError: Unknown browser query `> 1%`
at C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:164:11
at Array.reduce (<anonymous>)
at resolve (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:132:18)
at browserslist (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:224:16)
at Browsers.parse (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\postcss\lib\lazy-result.js:192:32)
Solved it
Seen as though I am using Chrome, it was creating a conflict in /node_modules/browserlist/index.js
I edited %1 and took out firefox and added:
// Default browsers query
browserslist.defaults = [
'> 5%'
]
I then also had to change gulpfile to correspond with the following task:
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('> 5%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
Here's the source if anyone encounters an issue like this
I am trying to import theme.json file into scss file and also mapped all the json values in my scss file with the map-get methodology.
Below is the code I am trying to compile to css:
gulp.task('sass', function() {
console.log(util.env.type);
var epub = gulp.src(['app/epubsource/themes/default/main.scss'])
.pipe(compass({
config_file: 'node_modules/gulp-compass/test/config.rb',
sourcemap: true,
css: 'app/epubsource/themes/default',
sass: 'app/epubsource/themes/default'
}))
.pipe(gulp.dest('app/epubsource/themes/default/'))
.pipe(reload({
stream: true
}));
return mergeStream(epub);
});
Below is the code for importing json in main.scss file:
#import "theme.json";
BTW, both main.scss and theme.json are on the same folder level.
Below is the error I am getting:
LoadError on line ["54"] of C: cannot load such file -- sass-globbing
Run with --trace to see the full backtrace
events.js:141
throw er; // Unhandled 'error' event
^
Error: Compass failed
Please help me to get out from this issue.
Uninstalled all the sass and compass dependencies and re-installed.
Now in node_modules>test>config.rb, add a dependency 'sass-json-vars' like sass-globbing.
Now, try to compile. That works like a charm!
Gulp Version 3.9.1
Gulp Ruby SASS Version 2.1.0
Function:
gulp.task('sass', function() {
sass('C:/xampp/htdocs/bptc/vendor/bower_components/font-awesome/scss/font-awesome.scss',
{ trace: true,
verbose: true
})
.on('error', sass.logError)
.pipe(gulp.dest('public/css/vendor'))
});
Output:
C:\xampp\htdocs\bptc>gulp sass
[12:00:40] Using gulpfile C:\xampp\htdocs\bptc\gulpfile.js
[12:00:40] Starting 'sass'...
[12:00:40] Running command sass --sourcemap=none --trace --update C:/xampp/htdocs/bptc/vendor/bower_components/font-awesome/scss/font-awesome.scss:C:\Users\agf365.BH\AppData\Local\Temp\gulp-ruby-sass\84a250b0f5e0b41f769aa0a7c55878cc\font-awesome.css
[12:00:40] Finished 'sass' after 41 ms
No error messages is appearing yet there are no output files.
When I run gulp, the 'styles' task starts running and sits forever, never finishing and not throwing any error. I have tried to uninstall and reinstall everything I can think of, and nothing seems to make a difference.
This is the function that is not finishing:
gulp.task('styles', function buildStyles() {
return gulp
.src(stylesGulpPaths)
// Copy scss files to build/scss for compass.
.pipe(gulp.dest('build/scss'))
// But only compile main.scss, which imports the rest.
.pipe(filter('**/main.scss'))
.pipe(compass({
css: 'build/css',
http_path: '/',
// image: 'build/images',
require: ['compass/import-once/activate', 'sass-globbing'],
sass: 'build/scss',
}))
.on('error', function (err) { console.error(err.message); })
// 'Concatenate' our one file so we write it to
// build/css/main.css
.pipe(concat('main.css'))
.pipe(gulpif(args.production, minifycss()))
.pipe(gulp.dest('build/css'));
});
var stylesGulpPaths = [
'app/**/*.scss',
'!app/vendor/**/*.scss',
];
Version:
gulp -v => 3.9.1
compass -v => 1.1.0.alpha.3 (Polaris)
node -v => 5.6.0
In my console it gets to the Starting 'styles'... line and just stays there forever.
I am pointing the correct ruby version (2.1.2).
Any thoughts are greatly appreciated.
Fixed it!
There were conflicting compass versions. I just had to uninstall compass, compass-rails, and sass-rails and reinstall compass.
What I do?
Run gulp (SCSS files are being processed, I get a CSS file)
I change any SCSS file again
Expected:
CSS file from 1. is updated with the changes from 2.
What happens?
CSS file from 1. isn't changed
Command line output:
$ gulp
[09:24:28] Using gulpfile c:\Users\User\_dev\github\project\gulpfile.js
[09:24:28] Starting 'sass'...
[09:24:28] Finished 'sass' after 98 ms
[09:24:28] Starting 'default'...
[09:24:28] Finished 'default' after 7.31 μs
[09:24:35] sass-watch saw _base.scss was changed
[09:25:39] sass-watch saw _base.scss was changed
gulpfile.js:
gulp.task('sass', function() {
watch({ glob: 'css/**/*.{scss,sass}', name: 'sass-watch'})
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('css'))
});
gulp.task('default', ['sass']);
Notes:
Issue on GitHub (gulp)
Issue on GitHub (gulp-watch)
gulpfile.js on GitHub Gist)
OS: Win7
node: 0.10.29
npm: 1.4.14
The way the source files are piped in is not important. The result stays the same when using gulp.src()
I dont think your sass task is correctly written.
Try something like this:
var gulp = require('gulp');
var sass = require('gulp-sass')
gulp.task('sass', function () {
gulp.src('PATH-TO-SASS-FILES/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});