如何使用Nuxt正确导入CSS模块？

Question

我正在使用带有Nuxt的CSS模块，并且尝试在我的js中导入样式表时遇到了一些问题。如果我将样式表直接导入到...中...

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

...一切正常。在我的特殊情况下，我需要运行一个计算属性，以便在两个不同的样式表之间进行选择，因此与其通过<style module>进行导入，还不如导入到<script>并实现如下样式：

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

在vue上实现此功能时，一切工作正常，我得到了一个样式对象。但是Nuxt返回的是空对象，我的样式均无法正确呈现。

我正在这样激活nuxt.config.js文件中的CSS模块：

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

这是Nuxt SSR的问题吗？我一直在寻找根本原因/解决方案，但是在我的搜索中运气不佳。

更新

在接受ivandata的建议并将此代码添加到我的构建脚本之后：

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模块似乎正在工作，但是弹出了一个新问题，那就是现在该项目无法理解任何非css-modules的vue组件样式。经过一番研究后，我发现resourceQuery告诉加载程序要将加载程序选项应用于哪种文件。

我尝试在vue.cli 3上挖掘样式加载器，并将其与Nuxt进行比较。我删除了ivandata的代码段，并尝试匹配vue和nuxt的加载程序，但问题仍然存在。

在启用和禁用ivandata的代码之间，这是视觉上发生的事情：

已禁用

已启用

这是我的项目中正在发生的事情的代码片段：

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

因此，如您所见，我在CSS加载程序中是否有resourceQuery，我的CSS的javascript导入不起作用，但是所有vue组件样式都正常运行。一旦删除resourceQuery，js导入的样式表便可以使用，但是vue-template样式类不再起作用。我认为解决方案不在于删除resourceQuery，而且我很好奇这是否与另一个加载程序完全相关。我已经通过vue.cli 3加载程序进行了相当多的挖掘工作，看不到任何明显突出的东西。

Answer 1

您不需要在nuxt中激活css模块，它们默认情况下处于活动状态。 Nuxt.js使用vue-style-loader来加载样式。 https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage 默认情况下，所有样式都是从带有模块属性的样式标签中加载的，因为样式加载器在oneOf规则中使用resourceQuery / module /。因此，如果删除此属性，nuxt将根据需要加载样式。

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

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

      delete cssLoader.oneOf[0].resourceQuery;

      ...
    }
  }
}

Answer 2

另一种方式。保留旧代码。删除我的代码并添加？module导入文件路径：

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

我错了。 resourceQuery选项用于测试请求字符串的查询部分。

Answer 3

nuxt版本：2.0.0。 除了交换作用域范围内的模块，您无需执行任何操作，例如：

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