Gulp is appending a leading '/' to the app.css mix.styles items and the output is consequentially 'unsual' , but the app.js mix.scripts output is perfectly fine. The question is - why is this only happening to the mix.styles portion when the gulpfile.js path structure is essentially the same format? and where is the reference to fonts.googleapis coming from?
I'm running laravel 5.3 in homestead in windows 10 bootcamp with PhpStorm
gulp output:
gulpfile.js:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var vendor_path = 'resources/assets/vendor';
var path = {
'jquery' : vendor_path + '/jquery',
'jqwidgets' : vendor_path + '/jqx/jqwidgets',
'jqxscripts' : vendor_path + '/jqx/scripts',
'bootstrap' : vendor_path + '/bootstrap'
};
elixir(function(mix){
/* Mix Styles */
mix.styles([
path.jqwidgets + '/styles/jqx.arctic.css',
path.jqwidgets + '/styles/jqx.bootstrap.css'
],
'public/css/app.css', '/');
/* Mix scripts */
mix.scripts([
path.jquery + '/dist/jquery.js',
path.bootstrap + '/dist/js/bootstrap.js',
path.jqxscripts + '/jquery-1.11.1.min.js',
path.jqwidgets + '/jqxcore.js',
path.jqwidgets + '/jqxdata.js',
path.jqwidgets + '/jqxbuttons.js',
path.jqwidgets + '/jqxmenu.js',
path.jqwidgets + '/jqxcheckbox.js',
path.jqwidgets + '/jqxlistbox.js',
path.jqwidgets + '/jqxscrollbar.js',
path.jqwidgets + '/jqxdropdownlist.js',
path.jqwidgets + '/jqxgrid.js',
path.jqwidgets + '/jqxgrid.selection.js'
],
'public/js/app.js', './');
mix.sass('app.scss')
.webpack('app.js');
});
Here is the app.css output:
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
@import url(/resources/assets/vendor/bootstrap/dist/css/bootstrap.css);
/*# sourceMappingURL=app.css.map */
Found a strange and simple solution - running 'gulp watch' instead of just 'gulp' as I had been doing, produces the expected app.css result.