Nuxt.js: CSS-Modules not importing stylesheets correctly in vue-component script

Created on 23 Mar 2019 · 3Comments · Source: nuxt/nuxt.js

Version

v2.4.0

Reproduction link

https://github.com/GRIM4CE/nuxt-css-module-issue

Steps to reproduce

In vue-component import style from './index.css' and set css-module in a computed property to imported style object: computed: { style() { return style }. In template html add <section :class="style.container"> css-module to a element.

index.css
.container { background-color: aqua; width: 100vw; height: 100vh; }

What is expected ?

css json object is imported and css-module classes are populated in vue-component, styles render as expected

What is actually happening?

empty object is returned from import, css-module classes are not populated and styles don't render

Additional comments?

I originally stumbled upon this issue after creating a private component library for work that utilized css-modules to switch between to different types of themes on package config. Everything looked great on our vue projects but once I uploaded the package to Nuxt it was obvious the package styles weren't working correctly.

I'm not completely sure if this is an issue with Nuxt but I've tested Vue-cli-3 by enabling css-modules and the expected behavior works by default. I dug through both Nuxt and Vue-cli-3 build loaders and don't see anything immediately that would cause different behavior between the two. It was suggested I delete the resourceQuery from the css-loader, this allowed css-modules to work as expected but broke normal template styles.

_{This bug report is available on Nuxt community (#c8909)}

bug-report stale

Source

GRIM4CE

👍1

Most helpful comment

Hi @GRIM4CE

vue-loader will resolve style with module attribute and inject the CSS modules locals object into the component as a computed property with the name $style.

Could you try below ?

<template>
  <section :class="$style.container">
    <h1>hey</h1>
    <h2 class="test">hey</h2>
  </section>
</template>

<script>
export default {
}
</script>

<style module>
@import './index.css';
</style>

<style>
h1 {
  font-size: 100px;
}

.test {
  font-size: 100px;
}
</style>

Another tricky way is append module to resource query for making css-laoder use css modules.

<template>
  <section :class="style.container">
    <h1>hey</h1>
    <h2 class="test">hey</h2>
  </section>
</template>

<script>
-  import style from './index.css'
+  import style from './index.css?module'

export default {
  computed: {
    style() {
      console.log(style)
      return style
    }
  }
}
</script>

<style>
  h1 {
    font-size: 100px;
  }

  .test {
    font-size: 100px;
  }
</style>

clarkdo on 9 Apr 2019

👍2

All 3 comments

Hi @GRIM4CE

vue-loader will resolve style with module attribute and inject the CSS modules locals object into the component as a computed property with the name $style.

Could you try below ?

<template>
  <section :class="$style.container">
    <h1>hey</h1>
    <h2 class="test">hey</h2>
  </section>
</template>

<script>
export default {
}
</script>

<style module>
@import './index.css';
</style>

<style>
h1 {
  font-size: 100px;
}

.test {
  font-size: 100px;
}
</style>

Another tricky way is append module to resource query for making css-laoder use css modules.

<template>
  <section :class="style.container">
    <h1>hey</h1>
    <h2 class="test">hey</h2>
  </section>
</template>

<script>
-  import style from './index.css'
+  import style from './index.css?module'

export default {
  computed: {
    style() {
      console.log(style)
      return style
    }
  }
}
</script>

<style>
  h1 {
    font-size: 100px;
  }

  .test {
    font-size: 100px;
  }
</style>

clarkdo on 9 Apr 2019

👍2

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open: