Bulmaのカスタマイズ方法 with Rails Webpacker

昨日作った Twitter Video Downloader で利用したBulmaについてです。
　
Bulma: a modern CSS framework based on Flexbox いいですよね。
bootstrapにしろCSSのFrameworkはゴリゴリCSS書くのがつらいエンジニアとしては、とても有り難いです。　

Customize方法

デフォルトの色を変えたりする方法がしばし分からずに、小一時間ぐらい悩みました。

通常はyarn add bulma した後に app/javascript/stylesheets/application.scss などでimportすれば使えます。

@import '~bulma/bulma';

カスタマイズするには、 Customize Bulma | Bulma: a modern CSS framework based on Flexbox
の通りにsassの読み込み順を意識しないといけませんでした。

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
$link: $grey;
$link-visited: $grey;
$link-hover: $grey;
$link-active: $grey;
$primary: #f78b4c;
@import '~bulma/bulma';

ついでに

どうやらsassにnextcssが混ざっているらしく、build時にwarningが出ます。

(Emitted value instead of an instance of Error) postcss-custom-properties

githubのissueではwarningだから気にすんなとか、
postcss-cssnext でpostcss-custom-propertiesをfalseにできるとか、
~bulma/sass/grid/_all を読ませなければokとか、
warning出ないようにsassの一部を削除したやつをforkしたから使えとか
色々あるようです。
　
個人的には、postcss-cssnext で false にしたかったのですが、webpacker周りがよく分からんかったので
stackoverflowに上げておきました。詳しい方がいらっしゃいましたら教えてください。
ruby on rails - (Emitted value instead of an instance of Error) postcss-custom-properties in bulma css - Stack Overflow

参考：

rochefort's blog

Bulmaのカスタマイズ方法 with Rails Webpacker

Customize方法

ついでに

See Also