Laravel Gulp Elixir with Sass and including libraries - laravel

I've just started using Laravel 5.0 and noticed it comes installed with Gulp and it's own library called Elixir. Looks good, however I'm having trouble including libraries such as Susy and Breakpoint to run with it.
In a typical Gulp setup I would pipe it in my styles task like this using gulp-ruby-sass:
.pipe(sass({ style: 'compact', require: ['susy', 'breakpoint'], "sourcemap=none": true }))
However, I've been unable to do something similar with Elixir. Has anyone come across a solution for this?
Currently the Elixir style task in my gulp file is like so:
elixir(function(mix) {
mix.sass('main.scss');});
Any advice would be greatly appreciated.
Thanks!

You can pass in node-sass options as the third parameter.
elixir.extend('sass', function(src, output, options)
So something like...
elixir(function(mix) {
mix.sass('main.scss', undefined, {
outputStyle: 'compact'
});
});

It doesn't seem like susy CSS framework work out of the box with gulp-sass in elixir. I had to install the "laravel-elixir-compas" module (https://github.com/rynocouse/laravel-elixir-compass). The Compass extension to elixir allows you to use susy and breakpoint.
You just need to define the import in config.rb
require 'breakpoint'
require 'susy'
And then you should be good to go..
I had "Compass Compilation Failed!" error which I was able to fixed by simply specifying the options for compass.mix() (refer to https://github.com/rynocouse/laravel-elixir-compass for options)
Hope that helps anyone with a similar issue

Related

SCSS Autoprefixer in PhpStorm

I am trying to configure SASS/SCSS Autoprefixer in phpstorm and no solution here or anywhere on google is working for me, any help is appreciated...
I have tried many options including making a custom file watcher and using postcss-cli autoprefixer, but not able to get it right.
As it's written in this comment, there is no built-in support for autoprefixer, and it can hardly be expected in near future. If you miss it, please vote for WEB-37.
You can install the autoprefixer (npm install postcss-cli autoprefixer -g) and set it up as a file watcher, for example
You can also try using sass-prefix-mixins in your code

use compass framework and compile with something else

do I have to compile with compass in order to use it framework ?
is it possible to use compass framework and compile sass with an other tool like gulp ?
You can use gulp-compass to compile compass.
Main thing about compass vs sass is being able to use #include x(y); to get browser prefixes (at least from my experience). You could also use gulp-autoprefixer and gulp-sass to accomplish something similar.
I use .scss files (because I like semi-colons) but a sass builder with my gulp file:
gulp.task('sass', function() {
return gulp.src(settings.sass.input)
.pipe(sourcemaps.init())
.pipe(sass(settings.sass.options).on('error', errorLog))
.pipe(autoprefixer(settings.sass.autoprefixer).on('error', errorLog))
.pipe(sourcemaps.write(settings.maps, {
sourceMappingURL: file => {
return file.relative + '.map';
}
}))
.pipe(gulp.dest(settings.sass.output))
.resume();
});
I used to use compass, then it started taking 10-15 seconds to compile, and ended up switching back to just using sass (though with a .scss file type).

Why is this Gulp error?

Im following this tutorial to compile Sass with Gulp
https://www.youtube.com/watch?v=cg7lwX0u-U0
I think im doing the same as in the video but I get this error that I don't understand.
I don't want to compress it, I just want to compile all my .scss files to a single styles.css file, as I do with Compass.
You are using gulp-ruby-sass instead of the regular gulp-sass. gulp-ruby-sass does not use the gulp.src() command, instead you should give the path to it directly like this:
gulp.task('styles', function() {
sass('sass/_*.scss')
.pipe(gulp.dest('css/'));
});

Why did my gulp task stopped generating my css files?

I use sass (triggered by a gulp task) to generate my css files. I recently formatted my computed and this task stopped working. 
var sass = require('gulp-ruby-sass');
var config = require('../config');
gulp.task('styles', ['copy'], function() {
gulp.src(config.sources.sass)
.pipe(sass({ style: config.isProduction ? 'compressed' : 'expanded' }))
.pipe(gulp.dest(config.build.cssDir));
});
This task used to work fine before I reinstalled my OS (Windows 8.1). Now after I run this task there is no visible errors, but no css files are created.
So, the question is:
Why did my gulp task stopped generating my css files? 
Your gulp task is fine.
gulp-ruby-sass uses, by default, the gem sass to compile your scss files. Since you recently formatted your computer I bet you installed the last version of Ruby Installer for Windows. I made some tests and I noticed that sass doesn’t seem to work on Windows while using Ruby 2.2.2. The sass gem works just fine on Ruby 2.2 on Ubuntu and OS X.
If that’s an option, I suggest that you downgrade from Ruby 2.2.x to Ruby 2.1.6 and that should fix your problem.
In case it doesn’t you could use gulp-debug to check your stream and start from there.
gulp.task('styles', ['copy'], function() {
gulp.src(config.sources.sass)
.pipe(debug({title: 'Before sass:'}))
.pipe(sass({ style: config.isProduction ? 'compressed' : 'expanded' }))
.pipe(debug({title: 'After sass:'}))
.pipe(gulp.dest(config.build.cssDir));
});
If you can't downgrade your ruby version, you could use gulp-sass instead of gulp-ruby-sass. Gulp sass doesn't require ruby at all, as it uses a wrapper made in node for a C/C++ library - libsass.
You could also edit your post and include your gulp-ruby-sass version (or your package.json) and also your nodejs version.

Importing Compass styles with Sass using Yeoman

I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.

Resources