Nuxt.js: [edge] cssModules does not work

[dojineko]

Version

2.0.0-25371809.c4ff714

Reproduction link

https://github.com/dojineko/reproduction-nuxt-edge-css-modules

Steps to reproduce

1. npm install (or yarn)
2. npx nuxt
3. see http://localhost:3000, and you can see RED typography, but I want BLUE one.

What is expected ?

What is actually happening?

---

If you rewrite it as follows it will turn blue.

<template>
  <div :class="$style.text" style="font-size:32pt; color:red;">
    EXPECT BLUE
  </div>
</template>

<style module>
- .text
+ :local(.text) {
  color: blue !important;
}
</style>

Additional comments?

I want cssModules to behave like the current version Nuxt.js.

Perhaps it is necessary to set the vue-loader.
The README of vue-loader 15 beta had the following description.
https://github.com/vuejs/vue-loader/tree/next#css-modules

(and it seems not works scopedCSS too.... maybe)

_{This bug report is available on Nuxt.js community (#c6794)}

[pi0]

It should be possible now. Please try upgrading to [email protected]

[dojineko]

@pi0

thank you for your update!
it works fine cssModules and scopedCSS too :)

ref: https://github.com/dojineko/reproduction-nuxt-edge-css-modules

<template>
  <div>
    <div class="base" :class="$style.styledByCssModules">
      EXPECT BLUE (styled by CSS Modules)
    </div>
    <div class="base styledByScopedCSS">
      EXPECT BLUE (styled by Scoped CSS)
    </div>
  </div>
</template>

<style>
.base {
  color: red;
  font-size: 32pt;
}
</style>

<style module>
.styledByCssModules {
  color: blue;
}
</style>

<style scoped>
.styledByScopedCSS {
  color: blue;
}
</style>

[pi0]

Happy hearing it works now. Thanks for the feedback.

[warriorBrian]

Hope to fix these problems as soon as possible and update the errors in the Chinese documentation, thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.