VueJS - How to remove classes while building? - vue.js

Question

I'm writing scoped SCSS. This creates like this html.
<nav data-v-8998d9f4 class="nav">
....
</nav>
.nav[data-v-8998d9f4] {
...
width: 100%;
}
But I would like to remove class names while building. So should be like this:
<nav data-v-8998d9f4>
....
</nav>
[data-v-8998d9f4] {
...
width: 100%;
}
Is there any way to do this? I choose my class names sloppy and I don't want them to appear. Also, classes are completely unnecessary when writing scoped.

Answer 1

After reviewing this question and my first answer again i have to admit that my first answer was wrong.
This is actually a bad idea. When removing the selector all of the elements inside that component will have the same styling, because that data-hash attribute is the same for the whole component. Also as far as i know there is no way to modify the naming of scoped styling in vue.js
However if you want the freedom to change the naming of the generated classes you might want to use CSS modules instead of scoped styling.
Here is a good explanation about that: https://www.netguru.com/codestories/vue.js-scoped-styles-vs-css-modules
Also theres a section in the vue-cli documentation for that:
https://cli.vuejs.org/guide/css.html#css-modules
Another alternative would be to use none of the above and instead go for something like BEM where you begin with your components name as the block. This way your style is scoped aswell and the readability is a lot better.
With my initial answer i have confused css modules with scoped styling, but for the record this is my initial answer:
Yes this is possible.
take a look at the following webpack config:
// webpack.config.js
{
module: {
rules: [
// ... other rules omitted
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'sass-loader',
options: {
// enable SCSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
source: https://vue-loader.vuejs.org/guide/css-modules.html#usage
localIdentName is what you are looking for. you could change this to '[hash:base64:8]'
However i personally think this makes your css unnecessarily verbose. Debugging something in the browser might be a pain like that.