Nuxt.js 如何配置全局 CSS？

推荐答案

在 Nuxt.js 中配置全局 CSS 可以通过以下几种方式实现：

1. 通过 nuxt.config.js 配置： 在 nuxt.config.js 文件中，可以通过 css 属性来引入全局的 CSS 文件。例如：

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

   这样，global.css 文件中的样式将会全局生效。

2. 通过 assets 目录： 将全局 CSS 文件放置在 assets 目录下，然后在 nuxt.config.js 中引用。例如：

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

   这种方式与第一种方式类似，只是路径的写法稍有不同。

3. 通过 layouts 目录： 在 layouts/default.vue 文件中，可以直接引入全局 CSS 文件。例如：

   <style>
   @import '~/assets/css/global.css';
   </style>

   这种方式适用于需要在特定布局中引入全局 CSS 的情况。

本题详细解读

1. 通过 nuxt.config.js 配置

nuxt.config.js 是 Nuxt.js 项目的核心配置文件，通过在该文件中配置 css 属性，可以轻松引入全局 CSS 文件。这种方式的好处是简单直接，适合在项目启动时就加载全局样式。

2. 通过 assets 目录

assets 目录是 Nuxt.js 项目中用于存放静态资源的目录，包括 CSS、图片、字体等。将全局 CSS 文件放在 assets 目录下，并通过 nuxt.config.js 引用，可以确保这些样式在项目构建时被正确处理。

3. 通过 layouts 目录

layouts 目录用于存放项目的布局文件，通常每个页面都会使用一个布局。在布局文件中引入全局 CSS 文件，可以确保这些样式在特定布局下的所有页面中都生效。这种方式适合需要在不同布局中使用不同全局样式的场景。

注意事项

• 确保 CSS 文件的路径正确，避免因路径错误导致样式无法加载。
• 如果项目中使用了 CSS 预处理器（如 SCSS、Less），可以在 nuxt.config.js 中配置相应的加载器。
• 全局 CSS 文件应尽量简洁，避免引入过多不必要的样式，以免影响页面加载性能。