css-loader how to make the transition component name of vue match when module is enabled
vue
<transition name="fade" @after-enter="afterEnter" @after-leave="afterLeave">
<div v-show="visible">
<div class="content"></div>
</div>
</transition>scss pre-compilation
.fade-enter-active, .fade-leave-active {
transition: opacity, 1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
loader
{
test: /\.scss$/,
use: [
"vue-style-loader",
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[path]-[name]____[local]____[hash:base64]",
camelCase: true
}
},
{
loader: "postcss-loader",
options: {
config: {
path: path.resolve(__dirname, "build")
},
sourceMap: true
}
},
"sass-loader"
]
}
scss compilation result
.client-assets--layout____fade-enter-active____3xzK2jeJomVp1jQMGxryTC, .client-assets--layout____fade-leave-active____1InWcOsdAKNiWCQDnPqFxt {
-webkit-transition: opacity, 1s;
-o-transition: opacity, 1s;
-moz-transition: opacity, 1s;
transition: opacity, 1s; }
.client-assets--layout____fade-enter____2XyS2qJHKzDvRuagPJB5Pn, .client-assets--layout____fade-leave-to____7Eliz01aPiz4dznViTu_D {
opacity: 0; }expect name "fade" to match scss compilation results
