Nuxt•3y ago

How to Hash css classes for production ?

Hey ! I'm look to hash my css classes for production only, i finded that was possible with nuxt2 with :

build: {
    /*
    ** You can extend webpack config here
    */      
    loaders: {
      cssModules: {
        modules: {
          localIdentName: "[local]--[Frida]_[hash:base64:4]",
        }
      }
    },
  },

build: {
    /*
    ** You can extend webpack config here
    */      
    loaders: {
      cssModules: {
        modules: {
          localIdentName: "[local]--[Frida]_[hash:base64:4]",
        }
      }
    },
  },

But i can't find the equivalent for nuxt3, any ideas ?

5 Replies

Zampa•3y ago

@Nathan / npldev I believe you would use a vite configuration to accomplish this, like:

export default defineNuxtConfig({
  vite: {
    css: {
      modules: {
        generateScopedName: "[local]--[Frida]_[hash:base64:4]",
      },
    },
  },
});

export default defineNuxtConfig({
  vite: {
    css: {
      modules: {
        generateScopedName: "[local]--[Frida]_[hash:base64:4]",
      },
    },
  },
});

Zampa•3y ago

See more here: https://vitejs.dev/config/shared-options.html#css-modules

Vite

Next Generation Frontend Tooling

Unknown User•3y ago

Message Not Public

Zampa•3y ago

I believe so - I haven't tried it myself as I don't use CSS Modules, but I believe that is the Nuxt 3 / Vite way to accomplish what you're needing

Unknown User•3y ago

Message Not Public

Gaming

Programming

How to Hash css classes for production ?

Did you find this page helpful?