Laravel gulp & elixir 材料设计答案

【问题标题】：Laravel gulp & elixir material designLaravel gulp & elixir 材料设计
【发布时间】：2016-04-07 15:26:47
【问题描述】：

我正在尝试使用 elixer 和 gulp 将 Material Design http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html 引入 Laravel。

我已经完成了：

npm install bootstrap-material-design

成功了，我在node_modules 中看到了地图。然后我将此添加到我的app.scss

@import "/node_modules/bootstrap-material-design/scss/bootstrap-material-design";

我的 gulp 文件如下所示：

elixir(function(mix) {
    mix.sass('app.scss');
    mix.browserify('app.js');
});

当我在终端中尝试 gulp 时，它会说：

[17:16:31] Finished 'default' after 743 ms
[17:16:31] gulp-notify: [Laravel Elixir] Sass Compilation Failed: resources/assets/sass/app.scss
Error: File to import not found or unreadable: /node_modules/bootstrap-material-design/scss/bootstrap-material-design
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "/node_modules/bootstrap-material-design/scss/bootstrap-material-desig
   ^

{ [Error: resources/assets/sass/app.scss
Error: File to import not found or unreadable: /node_modules/bootstrap-material-design/scss/bootstrap-material-design
       Parent style sheet: stdin
        on line 2 of stdin
>> @import "/node_modules/bootstrap-material-design/scss/bootstrap-material-desig
   ^
]

我做错了什么？

【问题讨论】：

以/ 开头的路径是相对于根的绝对路径。在您的情况下，它将是您计算机的根目录，（大概）没有 node_modules 目录。删除路径上的前导斜杠使其相对。然后，您需要根据您的目录结构放置正确的相对路径。例如，如果您告诉我们您将 app.scss 和您的 node_modules 文件夹放在哪里，那么有人可以提供相对路径
@benswinburne 我使用 Laravel 将它放在 reources/sass/app.scss 中
如果我没记错的话，gulp 运行在与 gulpfile.js 文件所在的目录相同的目录中，因此您应该能够从路径的开头删除正斜杠 (/)，它会工作@import "node_modules/bootstrap-material-design/scss/bootstrap-material-design";
事实上，正如理查德已经回答的那样。
当我删除 / 我面临下一个问题：laracasts.com/discuss/channels/elixir/…

标签： laravel gulp laravel-elixir bootstrap-material-design

【解决方案1】：

您的 node-modules 目录是否比您的 app.scss 文件高一级？如果是这样，请尝试删除导入中的前导斜杠： @import "node_modules/bootstrap-material-design/scss/bootstrap-material-design";

【讨论】：