Блог

Я, наконец, понял, как использовать localIdentName с Vue Nuxt.js

В моем Nuxt.config.js

 loaders: {
   cssModules: {
     modules: {
       localIdentName: "[local]--[hash:base64:6]",
     }
   }
}
 

Это отлично работает с моими компонентами scss

 <style module lang="scss">
    .example{
        color:black;
    }
</style>
 

Затем в этом модуле

 <div :class="$style.example"></div>
 

Выходы:

 <div class="example--ofjsig"></div>
 

Ура!

Но как я могу сделать так, чтобы он делал это только в процессе разработки, а в процессе производства [local]-- префикс опускался? Есть идеи?

В nuxt.config.js , вы могли бы использовать троичный на основе process.env.NODE_ENV (который установлен "production" в режиме производства), чтобы условно вставить этот префикс:

 loaders: {
   cssModules: {
     modules: {
       localIdentName: process.env.NODE_ENV === "production"
           ? "[hash:base64:6]"
           : "[local]--[hash:base64:6]"
     }
   }
}