Как минимизировать имена классов css в сборке webpack?
Раз используешь sass, то твой код должен будет выглядеть как-то так:

.my-super-puper-class {
  .the-most-puper-class {
    cursor: help;
  }
}

Или вот так, но вот так лучше не делать. Так как потом будет не удобно это дебажить или править.
.my-super-puper-class {
  &__the-most-puper-class {
    cursor: help;
  }
}
У вас есть 2 главных пути, используя статический препроцессор (не сможет обработать js) и линкер css-loader (с js)
При подходе с лоадером вам понадобится https://github.com/neatsoftware/webpack-minimal-cl... и помните о подходе с использованием css-модулей
Настройка для webpack.config.js (так как я использою vue то здесь css:{/*плагины или правила css*/})
const MinimalClassnameGenerator = require("webpack-minimal-classnames");
module.exports = defineConfig({
css: {
    loaderOptions: {
      css: {
        modules: {
          getLocalIdent: MinimalClassnameGenerator({ length: 1 }),
        },
      },
    },
})
Примерчик модульного подхода
<template>
  <nav :class="$style['super-puper-class']">
  </nav>
</template>

<style lang="scss" scoped module>
.super-puper-class {
  background: yellow;
}
</style>
В случае когда вам нужно без js - с модулями не получится. 
Но можно использовать
https://www.npmjs.com/package/posthtml-minify-clas...
Работу с которым я сейчас изучаю))