laravel - 如何让 Bulma CSS 框架与 Laravel Elixir 一起使用？

Question

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

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

先感谢您。

Answer 1

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

应用程序.scss

@import "node_modules/bulma/bulma";

那么你的 gulpfile 将是：

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

希望这可以帮助！

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