Configure SASS Load Path in Nuxt 3

I have my SCSS partials in my Nuxt 3 project's assets/css directory (e.g. assets/css/_cards.scss). I can import them in my components using the full path (@use '~/assets/css/cards';), but I'm having trouble getting the load path working so that I can import like @use 'cards';

From what I've seen, the Nuxt config should look like this to enable that, but this and similar variations are not working for me.

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    loadPaths: ['@/assets/css'],
                },
            },
        },
    },
});

Update for 2025

The configuration in the original answer is the configuration needed for the legacy SASS loader API. If using the modern or modern-compiler APIs, the option is now called loadPaths.

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',
          loadPaths: ['./assets/css'],
        },
      },
    },
  },
});

Original Answer

The correct key to use is includePaths which is documented here. I tried this key before, but the reason it did not work was that I used @/assets/css for the path. The @ alias does not work in this option, so I needed to use ./assets/css for the path. Here is the corrected config:

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    includePaths: ['./assets/css'],
                },
            },
        },
    },
});