Nuxt•2w ago

Nuxt4 and global css import

Context : fresh Nuxt 3.16 install with Nuxt 4 compatibility When I add a global css import in my nuxt.config.ts file :

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // yes, file exists from the app/ directory
  // i.e. app/assets/css/main.css from project's root (nuxt4 structure)

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // yes, file exists from the app/ directory
  // i.e. app/assets/css/main.css from project's root (nuxt4 structure)

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

I end up with an error 500: Cannot find module '~/assets/css/main.css' imported from 'virtual:nuxt:C:\Code\project\.nuxt\css.mjs' Is there a new strategy for global CSS imports with Nuxt4? I didn't find any info about it

8 Replies

kapa.ai•2w ago

Hi @enti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're encountering is related to how path aliases are resolved in the Nuxt configuration file. In Nuxt 4 (and when using compatibility mode in Nuxt 3.16), the ~/ and @/ aliases don't work properly in the nuxt.config.ts file. Why this happens According to the knowledge sources, aliases like ~/ and @/ are not properly resolved in the Nuxt configuration file. This is a known limitation, especially when working with Nuxt Layers or the new directory structure in Nuxt 4. Solution You have a few options to fix this: 1. Use relative paths instead of aliases

export default defineNuxtConfig({
  css: ['./app/assets/css/main.css'],
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

export default defineNuxtConfig({
  css: ['./app/assets/css/main.css'],
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

This approach is confirmed to work in a similar issue reported on GitHub. 2. Use full resolved paths For a more robust solution, especially if you're working with Nuxt Layers, you can use full resolved paths:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './app/assets/css/main.css')
  ],
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './app/assets/css/main.css')
  ],
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

This approach is recommended in the Nuxt documentation for Layers when dealing with relative paths in the Nuxt config. Additional note In Nuxt 4, there's also a change in how styles are inlined. Nuxt will now only inline styles for Vue components, not global CSS. This is a performance improvement that allows for better caching of global CSS files. If you want to revert to the previous behavior, you can set inlineStyles: true in your config, but this is unrelated to your current issue with path resolution. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

entiOP•2w ago

@kapa.ai even relative path doesn't work: Pre-transform error: Failed to resolve import "./app/assets/css/main.css" (and yes, that file exists in the right directory structure)

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're still having issues with the CSS import path even after trying the relative path. Let's look at this more closely. When using Nuxt 4 compatibility mode with the new directory structure, the path resolution works differently than you might expect. The issue is that in the nuxt.config.ts file, the relative paths are resolved relative to where the config is being processed, not necessarily relative to the project root. Correct relative path For a Nuxt 4 structure where your CSS is in app/assets/css/main.css, the correct relative path would be:

export default defineNuxtConfig({
  css: ['./assets/css/main.css'], // Not ./app/assets/css/main.css
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

export default defineNuxtConfig({
  css: ['./assets/css/main.css'], // Not ./app/assets/css/main.css
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

This is because in Nuxt 4, the app/ directory is considered the source directory, and paths in the config are resolved relative to it. Alternative solution with full path resolution If the simpler relative path doesn't work, you can try the full path resolution approach:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, 'app/assets/css/main.css')
  ],
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, 'app/assets/css/main.css')
  ],
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

This approach is recommended in the Nuxt documentation for Layers and has been confirmed to work in similar issues reported on GitHub. If you're still experiencing issues, it might be worth checking if there are any special characters in your path or if there might be permission issues with the file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

entiOP•2w ago

@kapa.ai using ./assets/css/main.css doesn't work either: Pre-transform error: Failed to resolve import "./assets/css/main.css" I tried your alternative solution, still doesn't work as well tl/dr: none of your solutions are working

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with the CSS import issue in Nuxt 4 compatibility mode. Let's try a different approach based on the knowledge sources. Looking at the GitHub issue #31628, there was a similar problem after upgrading to Nuxt 3.16.2 with CSS imports in layers. The solution that worked in that case was using an alias specific to the layer. Let's try these alternative approaches: 1. Use the absolute path from the project root

export default defineNuxtConfig({
  css: ['/app/assets/css/main.css'], // With leading slash
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

export default defineNuxtConfig({
  css: ['/app/assets/css/main.css'], // With leading slash
  
  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

2. Try importing the CSS file directly in your app.vue Instead of using the css property in the config, you could import the CSS directly in your main app.vue file:

<script>
// Use a static import for server-side compatibility
import './assets/css/main.css'
</script>

<script>
// Use a static import for server-side compatibility
import './assets/css/main.css'
</script>

3. Check if the path is correct In Nuxt 4 with the new directory structure, make sure your file is actually in: - app/assets/css/main.css (from project root) And not in: - assets/css/main.css (which would be the old structure) 4. Try using the @nuxt/ui approach If you're using or can use @nuxt/ui, their example configuration in the UI documentation shows:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/css/main.css']
})

This suggests that ~/assets/css/main.css should work in Nuxt 4 compatibility mode with the right setup. If none of these solutions work, this might be a bug in the current implementation of Nuxt 4 compatibility mode. Consider opening an issue on the Nuxt GitHub repository with your reproduction case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt4 and global css import

Did you find this page helpful?