Laravel 5: Elixir. How to reference a css file from node_modules directory

Question

I am using a css file that I import through npm. Respectively it is saved in my "/node_modules" directory.

I want to compile this file with my other scss files with elixir and am searching for a way, how to include it properly.

The options I could do is:

Rename the file from file.css to file.scss and import it in my app.scss
Copy the file.css file to my "resources/assets/" directory, rename it to scss and include it in my sass compilation like this:

Now I want to know, if there is a way to reference the file from the "node_modules" directory, without touching the file, because I want other people who download the project and use "composer install" and "npm install" to be up and running.

Or is the most common way to handle this, just to copy every required file from my "node_modules" directory to my resources/assets folder? Seems odd, since the included bootstrap file of the laravel framework is added just through an scss import in the app.scss file.

Now I want the same, but scss files can't import css files, which I have in my case, which would require for me to just rename it, which would not work out of the box on any other environment, since the "node_modules" directory is not included in version control.

Any recommendations, on what the best way is to compile css files in my "node_modules" directory?

Please see this its a example and code on github

Juan Ibarra
– Juan Ibarra

2018-04-02 18:01:56 +00:00
Commented Apr 2, 2018 at 18:01 — Juan Ibarra
– Juan Ibarra, Commented Apr 2, 2018 at 18:01

Sh1d0w · Accepted Answer · 2015-07-21 20:06:01Z

3

If you look at the Elixir documentation you will notice there are many handy functions you can use. One of them is the mix.copy() function (you can copy single file or whole directory, for example whole jquery folder).

elixir(function(mix) {
    mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
    mix.sass(['file.scss', 'app.scss']);
});

This way each time you call gulp it will first copy the scss file from node_modules dir and then will compile sass.

answered Jul 21, 2015 at 20:06

Sh1d0w

9,5203 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

damlys · Accepted Answer · 2016-05-19 19:07:29Z

1

Just add a dot before file path.

mix.scripts([
    './node_modules/autosize/src/autosize.js',
    './bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');

answered May 19, 2016 at 19:07

damlys

1261 silver badge8 bronze badges

Comments

Bald · Accepted Answer · 2017-01-02 16:53:41Z

var elixir = require('laravel-elixir');
var path = require('path');

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */

function node_modules(filename) {
    return path.join('../../../node_modules/', filename);
}

elixir(function (mix) {

    var base = [
        node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
        node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
    ];
});

Collectives™ on Stack Overflow

Laravel 5: Elixir. How to reference a css file from node_modules directory

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related