Laravel 长生不老药与 sass答案

【问题标题】：Laravel elixir with sassLaravel 长生不老药与 sass
【发布时间】：2016-12-28 12:26:07
【问题描述】：

我正在尝试在我的项目中使用bulma。但我得到一个错误：

{ Error: resources/assets/sass/app.scss
Error: File to import not found or unreadable: bulma
       Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss
        on line 1 of resources/assets/sass/app.scss
>> @import "bulma"
   ^

    at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)
  status: 1,
  file: '/Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
  line: 1,
  column: 1,
  message: 'resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n       Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n        on line 1 of resources/assets/sass/app.scss\n>> @import "bulma"\n   ^\n',
  formatted: 'Error: File to import not found or unreadable: bulma\n       Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n        on line 1 of resources/assets/sass/app.scss\n>> @import "bulma"\n   ^\n',
  messageFormatted: '\u001b[4mresources/assets/sass/app.scss\u001b[24m\nError: File to import not found or unreadable: bulma\n       Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n        on line 1 of resources/assets/sass/app.scss\n>> @import "bulma"\n   ^\n',
  messageOriginal: 'File to import not found or unreadable: bulma\nParent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
  relativePath: 'resources/assets/sass/app.scss',
  name: 'Error',
  stack: 'Error: resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n       Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n        on line 1 of resources/assets/sass/app.scss\n>> @import "bulma"\n   ^\n\n    at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }
MacBook-Pro-van-Jamie:forumv2 Janssen$

这就是我的Gulp 文件的样子：

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | 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(mix => {
    mix.webpack('app.js')
        .styles([
            './node_modules/normalize-css/normalize.css',
            './node_modules/nprogress/nprogress.css',
            './node_modules/sweetalert/dist/sweetalert.css',
            './node_modules/bulma/css/bulma.css'
            ])
        .sass('app.scss');
});

当我尝试像这样在我的app.scss 中导入它时：

@import "bulma"

我收到上述错误。有什么问题？

【问题讨论】：

标签： laravel npm sass

【解决方案1】：

bulma.scss 文件需要存在于resources/assets/sass 目录中才能导入，如果您从 npm 包导入，然后定义完整路径，如

@import 'node_modules/pathtobulma.scss/bulma';

【讨论】：

【解决方案2】：

尝试将它们包含在您的主 sass 文件中，而不是 gulp 文件中。我认为这样可以解决问题。

【讨论】：

【解决方案3】：

尝试将 const elixir = require('laravel-elixir'); 更改为 var elixir = require('laravel-elixir'); 这对我有帮助。

【讨论】：