vue.js - 如何根据开发或生产模式更改 CSS 模块输出？

Question

我终于想出了如何使用localIdentNameVue 的 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]--前缀呢？有任何想法吗？

标签： vue.jsnuxt.js

Answer 1

在nuxt.config.js中，您可以使用基于（在生产模式下process.env.NODE_ENV设置为）的三元有条件地插入此前缀："production"

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