分享
三行代码  ›  专栏  ›  技术社区  ›  cmp

如何根据开发或生产模式更改CSS模块输出?

  •  0
  • cmp  · 技术社区  · 6 天前

    我终于想出了如何使用 localIdentName 用Vue的文本.js

    在我的numxt.config.js文件

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

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

    然后,在那个模块里

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

    输出:

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

    但是我怎么能让它只在开发中这样做,而在生产中却忽略了 [local]-- 前缀?有什么想法吗?

    1 回复  |  直到 6 天前
        1
  •  1
  •   tony19    6 天前

    nuxt.config.js ,可以使用基于 process.env.NODE_ENV (设置为 "production" 在生产模式下)有条件地插入此前缀:

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