如何使用 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-component 样式。经过一番研究，我发现resourceQuery 告诉加载器将加载器选项应用于哪种类型的文件。

我尝试过深入了解 vue.cli 3 上的样式加载器，并将其与 Nuxt 进行比较。我删除了 ivandata 的 snippit，并尝试匹配 vue 和 nuxt 的加载器，但问题仍然存在。

以下是在启用和禁用 ivandata 代码之间视觉上发生的情况：

已禁用

已启用

这是我的项目中正在发生的事情的代码 sn-p：

<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-loader 中是否有 resourceQuery，我的 css javascript 导入不起作用，但所有 vue-component 样式都正常工作。一旦我删除了resourceQuery，js 导入的样式表就可以工作，但是 vue-template 样式类不再工作。我不认为解决方案在于删除resourceQuery，我很好奇这是否与另一个加载程序完全有关。我已经通过 vue.cli 3 加载器进行了相当多的挖掘，但看不到任何明显突出的东西。

Answer 1

好的，这是另一种方式。留下你的旧代码。删除我的代码并添加 ?module 以导入文件路径：

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

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

Answer 2

你不需要在 nuxt 中激活 css-modules，它们默认是激活的。 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 3

nuxt 版本：2.0.0。 你只需要交换作用域到模块，例如：

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