Closed
Description
Hello,
Currently get-id increments id and here is no way to change this behaviour.
In some cases you need to have unique id per webpack compilation
For instance, if you would like to include more then one precompiled apps into the pages and they have the same naming convention for styles:
app1/index.vue
<script>
export default {};
</script>
<template>
<footer class="container"></footer>
</template>
<style scoped>
.container {
background-color: red;
}
</style>app1/index.js
import App from './app1/index.vue';
export default new App({
el: 'footer'
});app2/index.vue
<script>
export default {};
</script>
<template>
<header class="container"></header>
</template>
<style scoped>
.container {
background-color: green;
}
</style>app2/index.js
import App from './app2/index.vue';
export default new App({
el: 'header'
});index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>gen-id</title>
</head>
<body>
<header></header>
<footer></footer>
<script src="app1/bundle.js" async></script>
<script src="app2/bundle.js" async></script>
</body>
</html>And after rendering you will see that styles would be overlapped:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>gen-id</title>
</head>
<body>
<header data-v-1></header>
<footer data-v-1></footer>
<script src="app1/bundle.js" async></script>
<script src="app2/bundle.js" async></script>
</body>
</html>@yyx990803 It would nice to have ability override behavior of gen-id.
For instance if vue.getId is Function then it will be used to resolve id, but if vue.getId is missing then default implementation will be used instead:
// utility for generating a uid for each component file
// used in scoped CSS rewriting
var fileUid = 1
var fileRegistry = Object.create(null)
module.exports = function genId (loaderContext) {
var vueOptions = loaderContext.vue || loaderContext.options.vue || {};
if (typeof vueOptions.genId === 'function') {
return vueOptions.genId(loaderContext);
}
return fileRegistry[loaderContext.resourcePath] || (fileRegistry[loaderContext.resourcePath] = fileUid++)
}