[Vuejs]-The styles folder in Nuxt 3 is not created. Why?

1👍

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"],
  ...
})

1👍

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"],
});

Leave a comment