Nuxt.js 中如何使用 CSS？

推荐答案

在 Nuxt.js 中使用 CSS 可以通过以下几种方式实现：

1. 全局 CSS：在 nuxt.config.js 文件中配置全局 CSS 文件。
2. 局部 CSS：在组件中使用 <style> 标签来编写局部 CSS。
3. CSS 预处理器：支持 Sass、Less、Stylus 等 CSS 预处理器。
4. CSS 模块：通过 scoped 属性或 CSS 模块来实现组件级别的样式隔离。

全局 CSS

在 nuxt.config.js 中配置全局 CSS 文件：

export default {
  css: [
    '~/assets/css/global.css'
  ]
}

局部 CSS

在组件中使用 <style> 标签：

// www.javascriptcn.com code example
<template>
  <div class="example">
    <p>This is an example component.</p>
  </div>
</template>

<style>
.example {
  color: red;
}
</style>

CSS 预处理器

使用 Sass 预处理器：

// www.javascriptcn.com code example
<template>
  <div class="example">
    <p>This is an example component.</p>
  </div>
</template>

<style lang="scss">
.example {
  color: red;
}
</style>

CSS 模块

使用 scoped 属性实现样式隔离：

// www.javascriptcn.com code example
<template>
  <div class="example">
    <p>This is an example component.</p>
  </div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

或者使用 CSS 模块：

// www.javascriptcn.com code example
<template>
  <div :class="$style.example">
    <p>This is an example component.</p>
  </div>
</template>

<style module>
.example {
  color: red;
}
</style>

本题详细解读

全局 CSS

全局 CSS 文件适用于整个应用程序，通常用于定义一些全局样式，如重置样式、字体、颜色变量等。通过在 nuxt.config.js 中配置 css 数组，可以将全局 CSS 文件引入到项目中。

局部 CSS

局部 CSS 适用于单个组件，通过 <style> 标签在组件内部定义样式。这种方式可以确保样式只作用于当前组件，避免全局污染。

CSS 预处理器

Nuxt.js 支持多种 CSS 预处理器，如 Sass、Less、Stylus 等。通过在 <style> 标签中添加 lang 属性，可以指定使用的预处理器。使用预处理器可以编写更加灵活和可维护的 CSS 代码。

CSS 模块

CSS 模块是一种实现组件级别样式隔离的技术。通过 scoped 属性或 CSS 模块，可以确保样式只作用于当前组件，避免样式冲突。CSS 模块还支持动态类名绑定，使得样式更加灵活。

通过以上几种方式，开发者可以根据项目需求选择合适的 CSS 使用方式，确保样式的可维护性和可扩展性。