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:

1. Rename the file from file.css to file.scss and import it in my app.scss

2. 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?

Answer 1

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.