Marco Marco - 3 months ago 13
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:

resources/assets/img
/js/app.js
/sass/_settings.scss
app.scss


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) {
mix.sass('app.scss');
});


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:

app.scss

@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:


{ [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';



Answer

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') 
       .sass('app.scss');
});

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