First you need to compile blog.css file from your less source file(s). If you have already done it check if you have blog.css in folder-name-with-your-laravel/public/assets/css/ (according to your href in link tag). Maybe this will help you: Laravel Elixir
Hello mkblade
this is my gulpfile.js
var elixir = require('laravel-elixir');
elixir(function(mix) { var dtPluginsDir = 'vendor/bower_components/datatables-plugins/';
// Copy jquery, bootstrap, and font awesome
mix.copy(
'vendor/bower_components/jquery/dist/jquery.js',
'resources/assets/js/jquery.js'
).copy(
'vendor/bower_components/bootstrap/less',
'resources/assets/less/bootstrap'
).copy(
'vendor/bower_components/bootstrap/dist/js/bootstrap.js',
'resources/assets/js/bootstrap.js'
).copy(
'vendor/bower_components/bootstrap/dist/fonts',
'public/assets/fonts'
).copy(
'vendor/bower_components/fontawesome/less',
'resources/assets/less/fontawesome'
).copy(
'vendor/bower_components/fontawesome/fonts',
'public/assets/fonts'
);
// Copy datatables
mix.copy(
'vendor/bower_components/datatables/media/js/jquery.dataTables.js',
'resources/assets/js/dataTables.js'
).copy(
dtPluginsDir + 'integration/bootstrap/3/dataTables.bootstrap.css',
'resources/assets/less/dataTables.less'
).copy(
dtPluginsDir + 'integration/bootstrap/3/dataTables.bootstrap.js',
'resources/assets/js/dataTables.bootstrap.js'
);
// Copy selectize and pickadate
mix.copy(
'vendor/bower_components/selectize/dist/css',
'public/assets/selectize/css'
).copy(
'vendor/bower_components/selectize/dist/js/standalone/selectize.min.js',
'public/assets/selectize/selectize.min.js'
).copy(
'vendor/bower_components/pickadate/lib/compressed/themes',
'public/assets/pickadate/themes'
).copy(
'vendor/bower_components/pickadate/lib/compressed/picker.js',
'public/assets/pickadate/picker.js'
).copy(
'vendor/bower_components/pickadate/lib/compressed/picker.date.js',
'public/assets/pickadate/picker.date.js'
).copy(
'vendor/bower_components/pickadate/lib/compressed/picker.time.js',
'public/assets/pickadate/picker.time.js'
);
// Copy the Clean Blog Less files
mix.copy(
'vendor/bower_components/clean-blog/less',
'resources/assets/less/clean-blog'
);
// Combine admin scripts
mix.scripts([
'js/jquery.js',
'js/bootstrap.js',
'js/dataTables.js',
'js/dataTables.bootstrap.js'
], 'public/assets/js/admin.js', 'resources/assets');
// Combine blog scripts
mix.scripts([
'js/jquery.js',
'js/bootstrap.js',
'js/blog.js'
], 'public/assets/js/blog.js', 'resources/assets');
// Compile Less
mix.less('admin.less', 'public/assets/css');
mix.less('blog.less', 'public/assets/css');
});
for some reason my blog.less is not compiling into blog.css when I run gulp. I realized this just before slept. I'm following a Laravel 5 beuty tutorial by Chuck Heitzman. Maybe it has to do with how he has it. I just ran it in the middle of typing it. when I run it I get
apples-MBP:darra_3 ray$ gulp
[06:59:11] Using gulpfile ~/Desktop/all_darra/darra_3/gulpfile.js
[06:59:12] Starting 'default'...
[06:59:12] Starting 'copy'...
[06:59:12] Finished 'default' after 36 ms
[06:59:12] Finished 'copy' after 355 ms
[06:59:12] Starting 'scripts'...
[06:59:12] Merging: resources/assets/js/jquery.js,resources/assets/js/bootstrap.js,resources/assets/js/dataTables.js,resources/assets/js/dataTables.bootstrap.js
[ 06:59:12] Merging: resources/assets/js/jquery.js,resources/assets/js/bootstrap.js,resources/assets/js/blog.js
[ 06:59:13] Finished 'scripts' after 518 ms
[06:59:13] Starting 'less'...
[06:59:13] Running Less: resources/assets/less/admin.less
[06:59:14] Running Less: resources/assets/less/blog.less
Potentially unhandled rejection [2] Error: ENOENT, open 'http://fonts.googleapis.com/css? family=Lora:400,700,/%0A400italic,700italic.less'
at Error (native)
[06:59:19] gulp-notify: [Laravel Elixir] Less Compiled!
everything is compiling into a css and css.map but not the blog.less for some reason
I only got three hours of sleeep. I figured it, out I had to remove
@import "//fonts.googleapis.com/css?family=Lora:400,700,\
400italic,700italic";
@import "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,\
600italic,700italic,800italic,400,300,600,700,800'";
from my blog.less file for it to work it had red squiggly error lines under it BUT so did this:
@import "//fonts.googleapis.com/css?family=Roboto:400,300";
in my admin.less which is why I was confused because admin.less was still compiling to admin.css with those error lines.
But this error showed
Potentially unhandled rejection [2] Error: ENOENT, open 'http://fonts.googleapis.com/css? family=Lora:400,700,%0A400italic,700italic.less'
at Error (native)
when I ran "gulp" with the following in my blog.less fill
@import "//fonts.googleapis.com/css?family=Lora:400,700,\
400italic,700italic";
@import "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,\
600italic,700italic,800italic,400,300,600,700,800'";
Still don't know why that is. but thankyou
I thought that. I thought it might have been something I missed because he mentions it not once in the7 times I read it
I had no clue this message was here unanswered.
The issue is the trailing slash on those two @import lines.
Because those two lines are very long, they're continued with a backslash, but typing them in you need to have them all one long line.
Sorry for any frustration. This caused. When in doubt be sure to check the github repo for Laravel 5 Beauty.
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community