Marco Marco - 1 month ago 4x
Sass (Sass) Question

Lumen/Elixir - File to import not found or unreadable

I need to setup sass in Lumen project, from the sass made in kitchen sink. It is my first time setting it up, so I am wondering how to setup a gulpfile.js for it?

I have installed node_modules by running npm install, and I have also installed laravel elixir.

I have put my folder/files structure looks like this:


My gulpfile.js looks like this:

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

| 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) {

But when I run gulp I get errors for all import and includes in my scss files:

This is how my scss files look like:


@import "settings";
@import "foundation";
@import "motion-ui";

@include foundation-flex-grid;
@include foundation-global-styles;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-flex-classes;
// @include foundation-accordion;
// @include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
// @include foundation-callout;
// @include foundation-close-button;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-flex-video;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-menu;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
// @include foundation-switch;
// @include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

And my _setttings.scss has this line, for which I get an error:

@import 'util/util';


{ [Error: resources/assets/sass/_settings.scss Error: File to import
not found or unreadable: util/util
Parent style sheet: /Users/markodraksic/Projects/Quiz-landing-page/resources/assets/sass/_settings.scss
on line 42 of resources/assets/sass/_settings.scss

@import 'util/util';


I reproduced your error and found the solution here.

You can try to copy the package to your resources.

Add the copy method to your gulpfile:

elixir(function(mix) {
    mix.copy('node_modules/foundation-sites/scss', 'resources/assets/sass') 

Another option is to add an include path (which I couldn't get to work).