如何让 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

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

Answer 2

您的解决方案的替代方法是将 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']);
});

希望对您有所帮助！

如何让 Bulma CSS 框架与 Laravel Elixir 一起工作？

How to get Bulma CSS framework to work with Laravel Elixir?

laravel

gulp

laravel-elixir

bulma