如何让 Bulma CSS 框架与 Laravel Elixir 一起使用？答案

【问题标题】：How to get Bulma CSS framework to work with Laravel Elixir?如何让 Bulma CSS 框架与 Laravel Elixir 一起使用？
【发布时间】：2017-02-07 13:20:13
【问题描述】：

使用 npm 安装了 Bulma CSS 框架。现在我正试图让 Bulma 与 Laravel Elixir 一起工作。到目前为止，我的 gulpfile.js 中有这个：

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

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

elixir((mix) => {
    mix
        .webpack('app.js')
        .styles([
            './node_modules/bulma/css/bulma.css'
        ])
        .sass('app.scss');
    mix.version(['css/app.css', 'js/app.js']);
});

但似乎没有任何效果。知道如何让它正常工作吗？

提前谢谢你。

【问题讨论】：

我认为你必须将其复制到 elixir 中或在 bootstrap.js 中要求它：laracasts.com/discuss/channels/elixir/…
你想在你的 app.css 中包含 bulma 吗？
@RossWilson，我希望能够在任何地方使用 Bulma ;) 我找到了解决方案。谢谢你们的cmets。

标签： laravel gulp laravel-elixir bulma

【解决方案1】：

您的解决方案的替代方法是将sass 包含在您的app.scss 文件中。

app.scss

@import "node_modules/bulma/bulma";

那么你的 gulpfile 将是：

elixir((mix) => {
    mix
        .webpack('app.js')
        .sass('app.scss');
    mix.version(['css/app.css', 'js/app.js']);
});

希望这会有所帮助！

【讨论】：

这确实是另一种选择。不过，目标是使用 Laravel Elixir。谢谢！
我的意思是使用 Laravel Elixir 导入 Bulma。
@louisfischer ...很公平

【解决方案2】：

感谢retrograde 的评论，我能够更好地理解 Laravel Elxir 的工作方式，并找到了解决问题的方法。我评论了我的gulpfile.js。也许它会帮助别人。

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

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

elixir((mix) => {
    // Retrieve the file from the node_module folder
    mix.copy('node_modules/bulma/css/bulma.css', 'resources/assets/css');

    // Compile app.scss and specify a destination
    mix.sass('app.scss', 'resources/assets/css/app.css');

    // Combine Bulma and my stylesheet (filename will be all.css by default) 
    mix.styles(['bulma.css', 'app.css']);

    // Compile and bundle ECMAScript 2015 into plain JavaScript
    mix.webpack('app.js');

    // See Laravel documentation: https://laravel.com/docs/5.3/elixir#versioning-and-cache-busting
    mix.version(['css/all.css', 'js/app.js']);
});

【讨论】：