如何使用 Nuxt 正确导入 CSS-Modules？

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 返回一个空对象，我的 none 样式正确呈现。

我在我的 nuxt.config.js 文件中激活 CSS-模块，如下所示：

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

这是 Nuxt SSR 的问题吗？我一直在寻找根 cause/solution，但在我的搜索中运气不佳。

更新

在采纳了 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 模块的 vue 组件样式。在做了一些研究后，我发现 resourceQuery 告诉加载器将加载器选项应用到什么类型的文件。

我已经尝试在 vue.cli 3 上挖掘样式加载器并比较与 Nuxt 的差异。我删除了ivandata的snippit，我尝试匹配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-loader 中有 resourceQuery 我的 javascript 导入的 css 不起作用但是所有 vue-component 样式正常工作。删除 resourceQuery 后，js 导入的样式表有效，但 vue-template 样式类不再有效。我不认为解决方案在于删除 resourceQuery 并且我很好奇这是否完全与另一个加载程序有关。我已经深入研究了 vue.cli 3 个装载机，但看不到任何明显突出的东西。

Answer 1

你不需要激活 nuxt 中的 css-modules，它们默认是激活的。 Nuxt.js 使用 vue-style-loader 加载样式。 https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage 默认情况下，所有样式都从具有 module 属性的样式标签加载，因为样式加载器在 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>

如何使用 Nuxt 正确导入 CSS-Modules？

How to import CSS-Modules correctly with Nuxt?

vue.js

css-loader

css-modules

nuxt.js

更新