公共资源与 sass

public 目录

public 目录主要用作静态资源公共服务器，在代码中可以直接访问到静态资源文件, 此目录的文件不会被构建工具所编译

比如在 public 目录下有个 img 文件夹，放一个 logo.png 文件

<img src="/img/logo.png" />

assets 目录

静态资源的管理目录，主要用在客户端，希望能被构建工具(Vite 或 webpack)处理的资源放在这个目录下 此目录不像 layoust，components，它不会被 nuxt 自动处理，所以此目录下的文件没有严格的命令规范 比如在 assets 目录下有个 img 文件夹，放一个 logo.png

<img src="~/assets/img/logo.png" />

全局样式

在配置文件中引入即可... nuxt.config.ts

export default defineNuxtConfig({
    ...,
    css: ['~/assets/css/index.css', '~/assets/css/base.css']
});

sass 配置

安装 sass

pnpm insall sass -D

导入

编写样式表的自然位置是 assets 目录。

然后，你可以使用你的预处理器的语法在你的 app.vue（或布局文件）中导入你的源文件。

组件里面导入

• 局部导入

<style lang="scss">
  @use "~/assets/scss/main.scss";
</style>

• 全局导入

/* assets/sass/variables.scss */
$primary: #49240F;
$secondary: #F0ECE3;

/* nuxt.config.ts中使用 */

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
})