I am trying to use Laravel elixir to compile a simple sass file app.scss which is in my resources > assets > sass directory. I have node, gulp and elixir installed and my gulpfile.js file looks like this...
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
However when I am running gulp I am getting some strange errors. I first tried with a simple sass file with no includes...
body {
padding-top: 40px;
}
body, label, /checkbox label {
font-weight: 300px;
}
I am getting this error from my terminal...
[14:44:40] Starting 'default'...
[14:44:40] Starting 'sass'...
[14:44:41] Finished 'default' after 1.45 s
[14:44:41] gulp-notify: [Laravel Elixir] Error: invalid top-level expression
[14:44:41] Finished 'sass' after 1.47 s
[14:44:41] gulp-notify: [Error running notifier] Could not send message: not found: notify-send
And when I add #include 'pages/home'; to the top of my app.scss file (and pages > home.scss does exist) I get the following error...
[14:38:03] Starting 'default'...
[14:38:03] Starting 'sass'...
[14:38:04] Finished 'default' after 1.42 s
[14:38:04] gulp-notify: [Laravel Elixir] Error: invalid name in #include directive
[14:38:04] Finished 'sass' after 1.44 s
[14:38:04] gulp-notify: [Error running notifier] Could not send message: not found: notify-send
I know the notifier error is because I am running it in a VM so that doesn't bother me but the previous errors are resulting in no sass being compiled at all.
If it helps I'm running Laravel 5 on Mac with OSX Mavericks using homestead as an environment.
The strange thing is that I had this working before and I just started a new Laravel project and all of a sudden it wont work. Does anyone know what's going on?
The first error is probably caused by the / in body, label, /checkbox label { Remove the slash and it should work.
The second one is because you are using #include when you actually want to #import.
#import is for including other sass/css files. #include is for using mixins.
Related
sass-loader version: 4.1.1
node-sass version: 4.1.1
webpack: 1.14
Node version: 7.3
I'm seeing my build with sass-loader failing on linux only (it's fine on a mac), but also not every time. i'm not totally sure if this is a sass issue or a sass-loader issue. It seems related to the webpack config, but I can't really see what's wrong. I am using the extract webpack text plugin, but the same bug happens without it.
It seems to be related to having 2 entry points reference the same set of sass.
Child extract-text-webpack-plugin:
+ 1 hidden modules
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/scss/alternate.scss
Module build failed:
#include media-query-phone() {
^
Stack level too deep
in /data/jenkins/workspace/build-branch/src/scss/elements/_grid.scss (line 88, column 16)
Child extract-text-webpack-plugin:
+ 1 hidden modules
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/scss/main.scss
Module build failed:
#include media-query-desktop() {
^
Stack level too deep
in /data/workspace/build-branch/src/scss/elements/_grid.scss (line 64, column 16)
at my root level, i have 2 sass files, main.scss and alternate.scss
//main.scss
#import 'folder1/**/*.scss';
//alternate.scss
#import 'folder2/thing';
#import 'main.scss';
none of the things inside folder 1 or 2 have any imports.
my webpack config entry points look like this
entry: {
//doesn't happen if either of these is left out
'main': './src/main.js', //the js file imports main.scss
'alternate-sass': './src/scss/alternate.scss'
},
the mixins that are causing errors look like this
#mixin media-query-phone() {
#media screen and (min-width: $phone-min-width) and (max-width: $tablet-min-width - 1) {
#content;
}
}
//used by
#include media-query-phone() {
.blah{
padding: 0;
}
}
node-sass 4.3 fixed the issue.
I'm working on my own differently structured version of Laravel, I've got the PHP end of things working but I'm having a problem with Elixir.
I've seen that supposedly setting elixir.config.assetsDir to a different path should do it but it doesn't seem to work for me? Any thoughts
My assets are in the following file structure
support
resources
assets
sass
js
And my gulp.js file (still in the project parent folder) looks like so:
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir.config.assetsDir = "./support/resources/assets/";
elixir(function(mix) {
mix.sass('app.scss');
});
Running gulp simply produces
[gulp] Starting 'default'...
[gulp] Starting 'sass'...
Fetching Sass Source Files...
- resources/assets/sass/app.scss <-- Not Found
Saving To...
- public/css/app.css
[gulp] Finished 'default' after 460 ms
[gulp] Finished 'sass' after 468 ms
I can fix the issues by giving the full path of app.scss but ultimately I'd rather not as I plan to reuse this framework setup a lot.
Starting elixir version 3.0, I believe it is now called assetsPath:
elixir.config.assetsPath = './support/resources/assets';
I tried many times searched all over but not solved i hav updated npm , gulp version
`$ gulp
[06:53:53] Using gulpfile d:\xampp\htdocs\l5\gulpfile.js
[06:53:53] Starting 'default'...
enter code here[06:53:53] Starting 'sass'...
Fetching Sass Source Files...
- resources\assets\sass\app.scss <-- Not Found`
Saving To...
- public\css\app.css
[06:53:53] Finished 'default' after 617 ms
[06:53:53] Finished 'sass' after 626 ms
app.scss is on resources/asset/saas
bellow is my gulp file
elixir(function(mix) {
mix.sass([
'app.scss',
], 'public/assets/css');
});
i want to use saas and when it will run it shows above error
if anyone know how to solve plz help
elixir not find the file
resources\assets\sass\app.scss <-- Not Found`
the file is "sass" not "saas"
rename your file "saas" to "sass"
I've been trying to compile two less files using Laravel's elixir.
In my gulpfile.js 'm doing :
elixir(function(mix) {
mix.less([
'app.less',
'soul.less'
]);
});
After running gulp, 'm only able to generate app.css and app.css.map in my 'public/css/' directory.
But i am not able to find the soul.css and soul.css.map. When i open a page with soul.css linked, the styles are being applied but the soul.css file cannot be found.
Any fix ?
Thanks
After Laravel 5.1 has been released you need to set the output path for files otherwise they will get combined by default.
elixir(function(mix) {
mix.less('app.less', 'public/css/app.css')
.less('soul.less', 'public/css/soul.css');
});
I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.
Here's a sample of my code :
gulp.task('compile-sass', function() {
gulp.src(buildType+config.path.sass+"/main.sass")
.pipe(compass({
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest(buildType+config.path.css+"/test"));
});
So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :
[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
I know I'm not using any config.rb, but two things :
1) I found no example of such files
2) gulp-compass doc gives example without such a file so I assume it's optional
Thanks in advance.
Thanks to SteveLacy i could manage to fix this.
If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :
var sass = require('gulp-ruby-sass');
gulp.task('compile-sass', function() {
gulp.src(path/to/your/sass/folder/main.sass")
.pipe(sass())
.pipe(gulp.dest('path/to/your/css/folder));
});
The most basic and simple way is:
var sass = require('gulp-ruby-sass');
gulp.task('styles', function() {
gulp.src('sass/*.scss')
.pipe(sass({
noCache : true,
style : "compact"
}))
.pipe(gulp.dest('css'));
});
The newest version of node-sass which is used by gulp-sass supports sass and scss syntax.
https://github.com/sass/node-sass/releases
or the latest release at this moment
https://github.com/sass/node-sass/releases/tag/v0.9.3
node-sass is using libsasss
https://github.com/sass/libsass/releases
Look at their 2.0 release notes.
I know this may not be the correct place for this answer, but there wasn't much on Google for people with gulp-ruby-sass errors.
For anyone receiving an error "source does not match any files." Be sure to make sure the path(s) you place within gulp.src() have at least 1 sass (or scss) file within them.
In my situation, I had 3 paths for the task and only 1 of the paths was completely empty. By adding a blank file (_fake.scss) to that path the error was fixed.
Hope this helps someone!
Newer versions of node-sass (and therefore gulp-sass, which is just a thin wrapper around node-sass) handle both sass and scss syntax, and decides which syntax to use by reading the file extension.
Here is a demonstration of a gulp file which handles both scss and sass syntax (not that you'd want that in your project):
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('my-sass-task', function () {
return gulp.src('styles/**/*.sass') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
gulp.task('my-scss-task', function () {
return gulp.src('styles/**/*.scss') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
This doesn't seem to be documented anywhere easy to find, I just happened to stumble on it.
Side note: I was wooed by sass but think I'll be moving to scss instead. This SO question has a lot of useful information in the answers if you're hovering over which to choose.