The css folder is not created when generating a static site: "npx nuxi generate"

What could be wrong?

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 file:

<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 folder screenshot

How do I create a folder with css files when compiling?

CodePudding user response：

Nuxt 3 comes with minimum setup, you could add folders as needed later when you go further with your. for styles, create folder with your preferred name and add its main entry to the config :

 styles
|__index.css

in nuxt.config.ts :

import { defineNuxtConfig } from 'nuxt'

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

CodePudding user response：

Understanding the problem

Nuxt does not know that you want to include the file in your build, because you are only referencing it as a plain javascript string.

The solutions

1. Moving your styles from /assets to /public

the files in the /assets directory are only getting included in the build if referenced, public on the other hand ensures that all files in that folder are always being included in the build

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

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

2. Adding a references in the nuxt.config

The second solution is to add a reference to the css file you want to include in the build like shown below:

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