Laravel Elixir includePaths not working

Asked
Active3 hr before
Viewed126 times

7 Answers

workinglaravel
90%

Stack Overflow Public questions & answers ,I'm not sure if there is a reason that you want to do includePaths in your gulpfile, but for bootstrap you don't have to. The bootstrap include path is already configured out of the box in /node_modules/laravel-elixir/ingredients:,I'm trying Laravel Elixir and want to include bootstrap with includePaths but it does not work. Where am I going wrong?, Meta Stack Overflow

I'm not sure if there is a reason that you want to do includePaths in your gulpfile, but for bootstrap you don't have to. The bootstrap include path is already configured out of the box in /node_modules/laravel-elixir/ingredients:

elixir.extend('sass', function(src, output, options) {

   options = _.extend({
      outputStyle: inProduction ? 'compressed' : 'nested',
      includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]
   }, options);

   return compile({
      compiler: 'Sass',
      pluginName: 'sass',
      pluginOptions: options,
      src: src,
      output: output,
      search: '**/*.+(sass|scss)'
   });
});

So all you should have to do is, in your gulpfile:

elixir(function(mix) {
   mix.sass("style.scss");
});

And then in your style.scss:

@import "bootstrap";

I think you have to set your .bowerrc file to:

{
   "directory": "vendor/bower_components"
}
load more v
88%

Error: File to import not found or unreadable: '..',Note: It's works with node-sass 4.7.2 version, var sass = require('gulp-sass'); pipe(sass({ outputStyle: 'expanded', **includePaths: path** }),styles\XX\bootstrap.scss Error: File to import not found or unreadable: base/styles/bootstrap.scss.

app├─── css│├─── 1. settings│├─── 4. base│├─── 5. components│├─── 6. trumps│└─── 7. third - party
   ...├───third - party│├─── pioneer││└─── src││├─── 1. settings││├─── 2. tools││├─── 3. generic││├─── 4. base││├─── 5. components││├─── 6. trumps││└─── 7. third - party
   ...
load more v
72%

Sidenote: I'm using gulp-sass in through Laravel Elixir (though I don't think that's important),Hmm, I probably wasn't very clear: I mean that from what I see, it's NOT relative to the file that's importing it... It's not that I have another use case, it's just not working as expected.,That got things working for me. I'm using gulp-sass, by the way,Also, I was just thinking that it might be useful to also resolve paths from node-sass' includePaths option?

I think something is wrong with this line:

let file = resolve(prev.slice(0, prev.lastIndexOf('/')), url);
load more v
65%

Я пытаюсь Laravel Elixir и хочу включить bootstrap с includePaths, но это не работает. Где я ошибаюсь? , Я пытаюсь Laravel Elixir и хочу включить bootsrap less файлов с includePaths, как в Elixir saass var paths = { 'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/' }... , Laravel Elixir не работает , Laravel Elixir включить пути для less

Я пытаюсь Laravel Elixir и хочу включить bootstrap с includePaths, но это не работает. Где я ошибаюсь?

var paths = {
   'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
   mix.sass("style.scss", 'public/assets/css/', {
      includePaths: [paths.bootstrap + 'stylesheets/']
   })
});
load more v
75%

If you've ever been confused about how to get started with Gulp and asset compilation, you will love Laravel Elixir. However, you are not required to use it while developing your application. You are free to use any asset pipeline tool you wish, or even none at all.,Working With Stylesheets Less Sass Plain CSS Source Maps , Eloquent ORM Getting Started Relationships Collections Mutators Serialization ,By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page.

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools. Using method chaining, Elixir allows you to fluently define your asset pipeline. For example:

elixir(function(mix) {
   mix.sass('app.scss')
      .coffee('app.coffee');
});
load more v
40%

But when I launch gulp from terminal:,I've got a problem with gulp.js.,Everything updated, so I think it's not a version problem.,in app.scss then i put every Foundation import

Steps to reproduce:

$ composer global require "laravel/installer=~1.1"
$ laravel new myproject
$ cd myproject
$ php artisan serve
$ npm install
$ npm rm bootstrap - sass— save
$ npm install foundation - sites— save
$ npm install motion - ui— save

then I copy

_settings.scss

from

node_modules / foundation - sites / scss / settings

to

resources / assets / sass

But when I launch gulp from terminal:

 path.js: 7
 throw new TypeError('Path must be a string. Received ' + inspect(path));

[EDIT]

$ node - v

v6 .8 .0
const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | 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(function(mix) {

   // Sass
   var options = {
      includePaths: [
         'node_modules/foundation-sites/scss',
         'node_modules/motion-ui/src'
      ]
   };

   mix.sass('app.scss', null, options);

   // Javascript
   var jQuery = '../../../node_modules/jquery/dist/jquery.js';
   var foundationJsFolder = '../../../node_modules/foundation-sites/js/';

   mix.scripts([
      jQuery,
      foundationJsFolder + 'foundation.core.js',
      // Include any needed components here. The following are just examples.
      foundationJsFolder + 'foundation.util.mediaquery.js',
      foundationJsFolder + 'foundation.util.keyboard.js',
      foundationJsFolder + 'foundation.util.timerAndImageLoader.js',
      foundationJsFolder + 'foundation.tabs.js',
      // This file initializes foundation
      'start_foundation.js'
   ]);

});
load more v
22%

The problem with this setup is the Elixir sass task doesn’t know how to find the import files from bower. Luckily this is an easy fix:,One exciting feature coming in Laravel 5 is the new Elixir package. At its core it is a wrapper around gulp to make dealing with assets easier.,Now with everything in place all we have left is the final elixir task:,Finally it’s time to actually install Bootstrap. From terminal you can run bower search bootstrap-sass and a plethora of options will fill your screen.

The first step is to install all the dependencies. I already had node on my machine and that is a requirement. To verify you have it you can run:

1n ode - v
load more v