未創建 Nuxt 3 中的 styles 文件夾。 為什么？

Question

生成 static 站點時未創建 css 文件夾：“npx nuxi generate”

有什么問題？

package.json：

    {
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "eslint": "^8.23.1",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.26.0",
    "nuxt": "^3.0.0-rc.11",
    "postcss": "^8.4.16",
    "postcss-import": "^15.0.0",
    "postcss-nested": "^5.0.6",
    "tailwindcss": "^3.1.8"
  }
}

nuxt.config.ts：

export default defineNuxtConfig({
  target: "static",
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          "postcss-import": {},
          "tailwindcss/nesting": {},
          "postcss-nested": {},
          autoprefixer: {},
          tailwindcss: {},
        },
      },
    },
  },
});

app.vue 文件：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
useHead({
  htmlAttrs: {
    lang: "ru",
  },
  link: [
    { rel: "stylesheet", type: "text/css", href: "~/assets/css/app.css" },
    { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
  ],
});
</script>

output 文件夾截圖

編譯時如何創建包含 css 文件的文件夾？

Answer 1

Nuxt 3 帶有最低設置，您可以稍后在您進一步使用 go 時根據需要添加文件夾。 對於 styles，使用您的首選名稱創建文件夾並將其主要條目添加到配置中：

+styles
|__index.css

在nuxt.config.ts中：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  head: {
     ....
  
  },
  css: ["@/styles/index.css"],
  ...
})

Answer 2

理解問題

Nuxt 不知道您想在構建中包含該文件，因為您只是將其引用為普通的 javascript 字符串。

解決方案

1. 將您的 styles 從 /assets 移動到 /public

/assets目錄中的文件只有在被引用時才會包含在構建中，另一方面， public確保該文件夾中的所有文件始終包含在構建中

https://v3.nuxtjs.org/guide/directory-structure/assets

https://v3.nuxtjs.org/guide/directory-structure/public

2.在nuxt.config中添加引用

第二種解決方案是添加對要包含在構建中的 css 文件的引用，如下所示：

export default defineNuxtConfig({
  css: ["~/assets/css/app.css"],
});