css - Lumen/Elixir - 找不到或无法读取要导入的文件

Question

我需要在 Lumen 元素中设置 sass，来自厨房水槽中制作的 sass。这是我第一次设置它，所以我想知道如何为其设置 gulpfile.js？

我已经通过运行 npm install 安装了 node_modules，并且还安装了 laravel elixir。

我的文件夹/文件结构如下所示:

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

我的 gulpfile.js 看起来像这样:

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');
});

但是当我运行 gulp 时，我的 scss 文件中的所有导入和包含都出现错误:

这就是我的 scss 文件的样子:

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;

我的 _setttings.scss 有这一行，我收到错误:

@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';

Answer 1

我重现了您的错误并找到了解决方案 here .

您可以尝试将包复制到您的资源中。

将复制方法添加到您的 gulpfile 中:

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

另一个选项是添加包含路径(我无法使用该路径)。