推荐答案
在 Nuxt.js 中使用 CSS Modules 非常简单。你只需要在 .vue 文件的 <style> 标签中添加 module 属性，并在模板中使用 $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. 动态类名
你还可以使用动态类名，通过计算属性或方法返回类名。
-- -------------------- ---- -------
----------
---- ------------------------ --------------- - ------------- - -------------------
---- -- - ------ --- ----- --- --------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ----
-
-
-
---------
------ -------
-------- -
------ ----
-
------------ -
----------------- ------
-
-------------- -
----------------- -----
-
--------5. 全局样式与局部样式
如果你需要在同一个组件中使用全局样式和局部样式，可以在 <style> 标签中同时使用 module 和 scoped 属性。
<style module> /* 局部样式 */ </style> <style scoped> /* 全局样式 */ </style>
6. 配置 CSS Modules
如果你需要自定义 CSS Modules 的配置，可以在 nuxt.config.js 中进行配置。
-- -------------------- ---- -------
------ ------- -
------ -
-------- -
---- -
-------- -
--------------- -------------------------
-
-
-
-
-在这个配置中，localIdentName 用于定义生成的类名的格式。
通过以上步骤，你可以在 Nuxt.js 中轻松使用 CSS Modules 来管理组件的样式。