Static GitHub Issues

[3149] [edge] cssModules does not work

prev: [edge] nuxt generate error with mini-css-extract-plugin
next: browser safari slideback

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 ?

<img src="https://user-images.githubusercontent.com/1488898/38083586-fb7d2d80-3384-11e8-906c-5793ca7c3d97.png" width="300">

What is actually happening?

<img src="https://user-images.githubusercontent.com/1488898/38083587-fba47278-3384-11e8-84a5-32dc288e03e8.png" width="300">

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)

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6794">#c6794</a>)</em></sub></div>