How to import CSS-Modules correctly with Nuxt?

Question

I'm using CSS Modules with Nuxt and have run into some issues when trying to import a stylesheet in my js. If I import my stylesheet directly into the...

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

...everything works as expected. In my particular case I need to run a computed property to choose between two different stylesheets so instead of importing through the <style module> I need to import into <script> and implement the styles like so:

<script>
import foo from './index.css'
export default {
  computed: {
    styles() {
      return foo
    }
  }
}
</script>

When implementing this on vue everything works great and I get a style object returned. Nuxt however is returning an empty object and none of my styles render correctly.

I'm activating CSS-Modules in my nuxt.config.js file like this:

export default {
  ...
    loaders: {
      css: {
        modules: true
      }
    }
  ...
}

Is this an issue with Nuxt SSR? I've been looking for the root cause/solution but haven't had much luck in my search.

Update

After taking ivandata's advice and adding to my build script this code:

export default {
  ....
  build: {
    extend (config, ctx) {

      const cssLoader = config.module.rules.find(rule => {
        return rule.test.toString() === '/\\.css$/i';
      });

      delete cssLoader.oneOf[0].resourceQuery;

      ...
    }
  }
}

CSS modules appear to be working but a new problem popped up which is that now the project doesn't understand any vue-component styles that are not css-modules. After doing a bit of research I found out that the resourceQuery is telling the loader what type of file to apply the loader options to.

I've tried digging through the style loader on vue.cli 3 and comparing the differences to Nuxt. I removed ivandata's snippit and I tried matching the loaders of vue and nuxt but the problem still persisted.

Here is what is happening visually when between enabling and disabling ivandata's code:

Disabled

Enabled

And here is a code snippet of what is going on in my project:

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

<script>
import style from './index.css'
export default {
  computed: {
    style() {
      return style
    }
  }
}
</script>

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

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

So as you can see if I have the resourceQuery in the css-loader my javascript import's of css do not work but all vue-component styles worked as normal. Once I remove the resourceQuery the js imported stylesheet works but the vue-template style classes no longer work. I don't think the solution lies in removing resourceQuery and I'm curious if this has something to do with another loader entirely. I've dug quite a bit through the vue.cli 3 loaders and can't see anything that distinctly sticks out to me.

kissu · Accepted Answer · 2021-03-30 09:42:11Z

3

Ok this another way. Leave your old code. Remove my code and add ?module to import file path:

<script>
  import foo from './index.css?module'
  export default {
    computed: {
      styles() {
        return foo
      }
    }
  }
</script>

I was wrong. resourceQuery option is used to test against the query section of a request string.

edited Mar 30, 2021 at 9:42

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Mar 26, 2019 at 11:08

imalov

1316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-03-30 09:40:56Z

1

You don't need activate css-modules in nuxt, they active by default. Nuxt.js use vue-style-loader for load styles. https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage By default, all styles loading from style tag with module attribute, because style loader use resourceQuery /module/ in oneOf rule. So if remove this property nuxt will load styles as you want.

export default {
  ....
  build: {
    extend (config, ctx) {

      const cssLoader = config.module.rules.find(rule => {
        return rule.test.toString() === '/\\.css$/i';
      });

      delete cssLoader.oneOf[0].resourceQuery;

      ...
    }
  }
}

edited Mar 30, 2021 at 9:40

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Mar 19, 2019 at 10:00

imalov

1316 bronze badges

5 Comments

Jleibham Over a year ago

Thank you so much, I had to change cssLoader to scssLoader but it did the trick. I could tell that css-modules was automatically being enabled but it didn't have the default behavior that was happening with Vue. Can't say I fully understand how this helps but maybe its time for me to read a little deeper into style loader.

Jleibham Over a year ago

Actually I originally implemented this in my test project and it worked great, but adding it to my main project breaks and code that isn't css-modules. Is it possible to define which files use this?

imalov Over a year ago

What you mean? Is it scope css or preprocessors? Anyway, you can change or replace nuxt loaders by same trick. Actually Webpack use Nuxt.config. So you can check all used loaders in config.module.rules and change them as you wish.

Jleibham Over a year ago

So I'm using css-modules in a package I'm importing to nuxt. The nuxt project styles are scss, and scoped in their own components. The problem I'm seeing if I enable this code is any scoped styles that aren't css-modules are getting ignored in build.

Jleibham Over a year ago

I added additional note above if you get a chance to revisit this. I appreciate your help.

kissu · Accepted Answer · 2021-03-30 09:41:08Z

1

nuxt version: 2.0.0. You need to do nothing but exchange scoped to module,such as:

<template>
  <div :class="$style.red">TEST</div>
</template>
<style module>
  .red{color:red;}
</style>

edited Mar 30, 2021 at 9:41

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Jan 14, 2020 at 2:23

summer

212 bronze badges

Collectives™ on Stack Overflow

How to import CSS-Modules correctly with Nuxt?

Update

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related