У вас есть 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...
Работу с которым я сейчас изучаю))