[Vuejs]-How to import CSS-Modules correctly with Nuxt?

by

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.

👤imalov

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;

      ...
    }
  }
}
👤imalov

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>
👤summer

Leave a comment