Nuxt.js 中如何使用 CSS Modules？

推荐答案

在 Nuxt.js 中使用 CSS Modules 非常简单。你只需要在 .vue 文件的 <style> 标签中添加 module 属性，并在模板中使用 $style 对象来引用类名。

// www.javascriptcn.com code example
<template>
  <div :class="$style.myClass">
    This is a styled div using CSS Modules.
  </div>
</template>

<style module>
.myClass {
  color: red;
  font-size: 20px;
}
</style>

在这个例子中，.myClass 会被编译成一个唯一的类名，并通过 $style.myClass 来引用。

本题详细解读

1. 什么是 CSS Modules？

CSS Modules 是一种将 CSS 类名局部化的技术，确保类名在组件范围内是唯一的，避免全局样式污染。每个类名都会被编译成一个唯一的哈希值，从而避免命名冲突。

2. 在 Nuxt.js 中启用 CSS Modules

在 Nuxt.js 中，默认情况下已经支持 CSS Modules。你只需要在 <style> 标签中添加 module 属性即可启用 CSS Modules。

<style module>
/* 你的 CSS 代码 */
</style>

3. 使用 $style 对象

在模板中，你可以通过 $style 对象来访问 CSS Modules 中的类名。$style 是一个包含所有类名的对象，类名作为对象的属性。

<template>
  <div :class="$style.myClass">
    This is a styled div using CSS Modules.
  </div>
</template>

4. 动态类名

你还可以使用动态类名，通过计算属性或方法返回类名。

// www.javascriptcn.com code example
<template>
  <div :class="[$style.myClass, $style[isActive ? 'activeClass' : 'inactiveClass']]">
    This is a styled div using CSS Modules.
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

<style module>
.myClass {
  color: red;
}

.activeClass {
  background-color: green;
}

.inactiveClass {
  background-color: gray;
}
</style>

5. 全局样式与局部样式

如果你需要在同一个组件中使用全局样式和局部样式，可以在 <style> 标签中同时使用 module 和 scoped 属性。

<style module>
/* 局部样式 */
</style>

<style scoped>
/* 全局样式 */
</style>

6. 配置 CSS Modules

如果你需要自定义 CSS Modules 的配置，可以在 nuxt.config.js 中进行配置。

// www.javascriptcn.com code example
export default {
  build: {
    loaders: {
      css: {
        modules: {
          localIdentName: '[local]_[hash:base64:5]'
        }
      }
    }
  }
}

在这个配置中，localIdentName 用于定义生成的类名的格式。

通过以上步骤，你可以在 Nuxt.js 中轻松使用 CSS Modules 来管理组件的样式。