Import local CSS file | Nuxt | Page 1

Hi @dense valve. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To import a local CSS file in a Nuxt 4 project, you should place your CSS file in the app/assets directory (not just assets/ at the root). The correct path for your CSS file should be app/assets/css/index.css, and you should reference it in your nuxt.config.ts as follows:

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

The ~/assets alias in Nuxt 4 points to /app/assets, not just /assets. If your file is not in the correct directory, Nuxt will not find it and you'll get the error you described. Make sure your project structure looks like this:

project-root/
└── app/
    └── assets/
        └── css/
            └── index.css

If you already have the file in the correct place and still see the error, double-check that there are no typos in the path and that the file actually exists. You do not need to install additional plugins like vite-tsconfig-paths for this to work with Nuxt's built-in aliases.

#Import local CSS file

For more details, see the official documentation: Nuxt 4 Styling Guide and Clarification on ~/assets alias.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: