CODEWITHSUNDEEP
webpackvuejs2nuxt.jscss-modulesless-loader
hatja
hatja

Reputation: 121

Nuxt2 css (.less) build changes class names in css

I've got a Nuxt2 app, the problem is that after the build all the class names are changed to unique ids, but only in the css not in html, so obviously it doesn't work. I've read about putting every css into a :global {}, but I really don't want to edit all the .less files and all the vue components that includes some <style>.

Is there any way to disable this behavior and keep the class names in css?

Here are my related config:

nuxt.config.js

  css: [
    '@/assets/less/main.less'
  ],
 build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue|ts)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },

main.less

@import 'colors';

.main-container {
  position: relative;
}

.some-other-class {
  color: cyan !important;
}

#__nuxt {
  .nuxt-progress {
    display: none !important;
  }
}
...

And then at the end of the vue files there are some more css

<style lang="less">
  .foo {
    font-size: 2rem;
  }
  .main-loader {
    position: fixed;
    top: 0;
    left: 0;
  }

</style>

After nuxt dev this is what I get:

<style type="text/css">

._2ziUxTIl2ToSZKEtQFWezE {
    color: cyan !important;
}
._2y3yDMBkHmkrDt1g-FaM5L {
    position: relative;
}
...
</style>

But in the html the class names are still normal, like some-other-class and main-container.

If I read about it correctly it has something with css-modules but to be honest I am a bit confused because there are the nuxt, css-loader, less-loader, css-modules, webpack etc, not sure which is the one I am looking for.

Upvotes: 0

Views: 321

Answers (2)

Afagh
Afagh

Reputation: 1

it seems to be a known issue with nuxt. It happens when declaring styles in non-scoped style tag, and using it somewhere else.

Upvotes: 0

kissu
kissu

Reputation: 46676

OP ended up creating a new project because of the difficulty of understanding all the tools in modern frontend.

Upvotes: 0

Related Questions