作成: 更新:

scssのクラス名がハッシュ化するのをやめたい

Sassscsswebpack

概要

開発時に開発者ツールでスタイル等を追うと

  • ._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指定でデフォルトがローカルスコープになる