作成: 更新:
scssのクラス名がハッシュ化するのをやめたい
この記事は最終更新日から1年以上が経過しています。この記事は最終更新日から21か月以上が経過しています。
このエントリーは約1分で読めます。
概要
開発時に開発者ツールでスタイル等を追うと
._23_aKvs-b8bW2Vg3fwHozO._13LGdX8RMStbBE9w-t0gZ1
このようにクラス名がハッシュ化されており
何のスタイルかわからない為
.flameBase-flameHeader-2jKsL
このようにモジュール名とクラス名がわかるようにしたい
そんなときの方法が以下
修正ファイル
webpack.config.babel.js
置換内容
# 置換前
loader: 'style!css?minimize&modules!sass', // modules指定でデフォルトがローカルスコープになる
# 置換後
loader: 'style!css?minimize&modules&localIdentName=[name]-[local]-[hash:base64:5]!sass', // modules指定でデフォルトがローカルスコープになる