cssで-webkit-box-orientを定義したのに反映されない

2020年3月10日

こちらを見て解消した。

Autoprefixerが悪さをしていたようです。
Autoprefixerは最新のブラウザ実装状況をまとめたサイト「Can I use」の情報を使用し、必要なベンダープレフィックス(-webkit-、-ms-、-moz-など)を付与する為のツールとのこと。
より詳しくは、こちらで

解決策

いくつか方法があるようですが、今回はコメントアウトする方法で対応しました。
Autoprefixerの最新バージョンを使っていればこの問題は発生しないようです。
ただ、Autoprefixerのバージョンごとにコメントアウトの方法もいくつかあるようなので、
以下順番に試せばよいと思います。

①バージョンが8.4以降

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

②バージョンが8.4より古い

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

③SCSSコンパイル時のoutputStyleを compressed にしている場合

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */

②でうまくいかない場合はこちらを試せばよいと思います。
私は③でやっとうまくいきました。