Madogiwa Blog

主に技術系の学習メモに使っていきます。

bulmaで一部の必要なmoduleだけimportして利用するMEMO📝

bulmaを利用している際に@import 'bulma/bulma'をで全部入りを利用してしまうとCSSのサイズも大きくなりbulmaに強く依存してしまって外しにくくなってしまって困ってたのですがモジュール単位で利用できることを知ったのでメモ📝

bulma.io

やり方は簡単で以下のように必要なcssだけimportするようにしてあげれば良い感じでした🙆‍♂️

以下はbulmaのモーダルと、モーダルが依存しているユーティリティ系のCSSを利用する例です。 ※手抜きしてユーティリティはモーダルのCSS内で利用有無に関わらず全てimportしてますが、必要なものだけimportしてもよさそうです。

@import "bulma/sass/utilities/all";
@import "bulma/sass/components/modal";

公式サイトにもちゃんと書いてありますね👍

Bulma consists of 39 .sass files that you can import individually.
Modularity | Bulma: Free, open source, and modern CSS framework based on Flexbox