Nuxt 2 中使用 css 模块和 extractCSS 进行类复制

Answer 1

您可以创建一个单独的 CSS 文件（例如，shared.css），在其中定义共享类。

我认为你的项目结构是这样的：

- assets
  - css
    - shared.css
- components
  - Hello.vue
  - Goodbye.vue
- nuxt.config.js

在

shared.css

中，定义您的共享类：

/* shared.css */
.sharedClass {
  /* styles */
}

在 nuxt.config.js 中，指定 extractCSS 选项以将 CSS 提取到单独的文件中：

// nuxt.config.js
export default {
  // other configurations
  build: {
    extractCSS: true
  }
}

然后，在您的组件中，导入shared.css：

<!-- Hello.vue -->
<template>
  <div :class="$style.title">Hello, World</div>
  <div :class="$style.sharedClass">Hello, World</div>
</template>

<script>
export default {}
</script>

<style module src="./hello.css"></style>
<style src="~/assets/css/shared.css"></style>

<!-- Goodbye.vue -->
<template>
  <div :class="$style.title">Goodbye, World</div>
  <div :class="$style.sharedClass">Goodbye, World</div>
</template>

<script>
export default {}
</script>

<style module src="./goodbye.css"></style>
<style src="~/assets/css/shared.css"></style>

通过此设置，Nuxt.js 将在构建过程中自动将

shared.css

中定义的共享类提取到单独的 CSS 文件中。