N
Nuxt•3mo ago
lkjimy

Nuxt layers: Cant import scss files in a layer

 ERROR  Pre-transform error: [sass] Can't find stylesheet to import.
  ╷
5 │ @use 'assets/scss/modules/normalize';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  layers/ui/assets/scss/main.scss 5:1  root stylesheet
  Plugin: vite:css
  File: /home/app/layers/ui/assets/scss/main.scss:5:1
  [sass] Can't find stylesheet to import.
    ╷
  5 │ @use 'assets/scss/modules/normalize';
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    layers/ui/assets/scss/main.scss 5:1  root stylesheet
 ERROR  Pre-transform error: [sass] Can't find stylesheet to import.
  ╷
5 │ @use 'assets/scss/modules/normalize';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  layers/ui/assets/scss/main.scss 5:1  root stylesheet
  Plugin: vite:css
  File: /home/app/layers/ui/assets/scss/main.scss:5:1
  [sass] Can't find stylesheet to import.
    ╷
  5 │ @use 'assets/scss/modules/normalize';
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    layers/ui/assets/scss/main.scss 5:1  root stylesheet
export default defineNuxtConfig({
  css: ['#layers/ui/assets/scss/main.scss'],
})
export default defineNuxtConfig({
  css: ['#layers/ui/assets/scss/main.scss'],
})
All imports inside main.scss can't be found, and I didn't find a way to use aliases inside .scss files.
3 Replies
kapa.ai
kapa.ai•3mo ago
Hi @lkjimy. 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 due to how Nuxt and Vite resolve paths and aliases inside SCSS files, especially when working with layers. In Nuxt, SCSS imports inside your stylesheets do not understand Nuxt's JavaScript aliases like ~/ or #layers/ui/—they only understand standard Node.js resolution and relative paths. From the knowledge sources: - SCSS imports in stylesheets do not support Nuxt/Vite aliases. You must use relative paths or ensure your files are resolvable from the current file's location. For example, inside layers/ui/assets/scss/main.scss, you should use a relative path to import normalize: 
  @use './modules/normalize';
  
  @use './modules/normalize';
or, if your structure is different, adjust the path accordingly. Using 'assets/scss/modules/normalize' will not work because SCSS does not know about the Nuxt alias system in this context. - When working with layers, aliases like ~/ and @/ resolve relative to the user's project, not the layer. The documentation suggests using relative paths within layers, or, if you need to reference files in the layer from the config, use fully resolved paths with Node.js utilities like path.join() and __dirname (see example below) [Relative Paths and Aliases]. 
  import { fileURLToPath } from 'url'
  import { dirname, join } from 'path'

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

  export default defineNuxtConfig({
    css: [
      join(currentDir, './assets/scss/main.scss')
    ]
  })
  
  import { fileURLToPath } from 'url'
  import { dirname, join } from 'path'

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

  export default defineNuxtConfig({
    css: [
      join(currentDir, './assets/scss/main.scss')
    ]
  })
- SCSS in Nuxt layers: Always use relative paths for SCSS imports inside your layer's SCSS files. Do not rely on Nuxt/Vite aliases in SCSS. Summary of what you should do: - Change your SCSS imports in main.scss to use relative paths. - If referencing the SCSS file in your Nuxt config, use a fully resolved path as shown above. There is no way to use Nuxt or Vite aliases inside SCSS files according to the current documentation and community experience [Relative Paths and Aliases]. If you need to share variables or mixins across layers, consider using npm packages or symlinks, but always import them using relative or node-resolvable paths in your SCSS. --- References: - Relative Paths and Aliases - Using Preprocessors - Stack Overflow: Nuxt 3 + SASS: Can't use include paths with @import and @use ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
lkjimy
lkjimyOP•3mo ago
I was able to import the scss files by using their relative path, but without the ./ in front. An import inside the /assets/scss/main.scss file would look like this: @use 'modules/normalize'; Other scss imports inside folders in this directory can be imported in the same way, by relative path: No ./ or assets/scss/....

Did you find this page helpful?