Bulma CSSフレームワークをLaravel Elixirと連携させるには？

Question

npmを使用してBulma CSSフレームワークをインストールしました。今、私はBulmaにLaravel Elixirを働かせようとしています。これまで私はgulpfile.jsにこれを持っています.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

あなたのソリューションに代わるものは、あなたのapp.scssファイルにsassを含めることであろう。

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

は、この情報がお役に立てば幸い！