Gulpを導入してコーディングが一気に効率化されてウキウキしている頃に起こりがちで、ちょこちょこ相談とかも受けていたものに、特にエラー箇所もないのに、なぜかSCSSからCSSにコンパイルされないクラスがある。というものがある。
正確にはGulpの問題ではないのだけど、なにが原因が特定できずパニクっている方もいると思うので（ワシだ）対策方法を記載しておく。
原因
Web制作を始めた頃の僕もこれでめっちゃつまずいたんですが、gulpfileをどこかからコピペで持ってきて内容を理解せず使っていたりするとよくおこります（猛省
原因はPurgeCSSというプラグイン。
CSSから未使用のスタイルを削除してファイル容量を削減するプラグインなのですが、スワイパーなどjsで動的に出しているclassはコンパイルされる際に、除外されてしまいます。
対策
PurgeCSSのオプションであるsafelistを使用するか、特殊なコメントを記述して残しておきたいクラス名を除外させないように設定できます。
safelistで追加する方法
const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: ['random', 'yep', 'button'] //safelistに入れたクラスは除外されなくなる
})safelistでパターン化して追加する方法
const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: {
standard: [/red$/],
deep: [/blue$/],
greedy: [/yellow$/]
}
})上記の記述方法では、safelistオプションの中に3つのstandard、deep、greedyというプロパティがあります。
standardでは、/red$/という正規表現が使われています。
これはセレクタの最後が「red」で終わるものを残すという意味です。例えば、.text-redというセレクタは残ります。
deepでは、/blue$/という正規表現が使われています。
これはセレクタの最後が「blue」で終わるものだけでなく、その子要素も残すという意味です。例えば、.blue pや.text-blue .child-of-bgというセレクタは残ることになります。
greedyでは、/yellow$/という正規表現が使われています。
これはセレクタのどの部分かが「yellow」で終わるものを残すという意味のようです。例えば、button.bg-yellow.other-classというセレクタは残るということ…？のようです（いまいちよくわかっていない
直接SCSSファイルにコメントを記述し回避する方法
以下、ふたつのコードは、PurgeCSSがCSSコードからセレクタを削除する際に、特定のセレクタを無視する方法を示しています。ただし、それぞれの書き方には微妙な違いがあります。
/* purgecss ignore */
.hoge {
color: blue;
}/* purgecss ignore */
このコメントは、PurgeCSSに対して「このセレクタ（h1）は削除しないでください」と伝えるものです。これにより、h1要素のスタイルが保持されます。
.hoge {
/* purgecss ignore current */
color: blue;
}/* purgecss ignore current */
このコメントは、「この特定の行（color: blue;）は削除しないでください」と伝えるものです。つまり、この行に関連するスタイル（hogeのカラーを青くする）が保持されます。
まとめてsafelistに追加する方法
/* purgecss start ignore */
h1 {
color: blue;
}
h3 {
color: green;
}
/* purgecss end ignore */
h4 {
color: purple;
}
/* purgecss start ignore */
h5 {
color: pink;
}
h6 {
color: lightcoral;
}
/* purgecss end ignore */上記は、PurgeCSSがCSSコードからセレクタを削除する際に、特定の部分を無視する方法です。
/* purgecss start ignore / と / purgecss end ignore */ の間にある部分は、PurgeCSSが無視する範囲として指定されており、これらの行の間に書かれたセレクタ（h1、h3）および（h5、h6）は、削除されずに残ります。
注意点
PostCSSなどのCSS最適化ツールを使用している場合、ビルドの過程でPurgeCSSが実行される前にコメントを削除してしまい気づかないことがあります。これは知らず知らずのうちに表示崩れが起きる原因なのでコメント最初に「！」マークをつけてこのコメントが重要であることを明示的に記述しておきましょう。
/*! purgecss start ignore */ //先頭に!マークをつけて削除されないようにする
h5 {
color: pink;
}
h6 {
color: lightcoral;
}
/*! purgecss end ignore */まとめ
気づかないとものすごく時間を取られるので、コンパイルされたCSSでなぜかクラスが削除されてしまっている方は一度確認してみてください。