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

솔루션에 대한 대안은 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']); 
}); 

희망이 도움이!