nuxt scss
500
Cannot find module '/scss/app.scss' imported from 'virtual:nuxt:C%3A%2FUsers%2Fzhaol%2FProjects%2Fbluevyfrontend-william%2F.nuxt%2Fcss.mjs'
Customize this page
Cannot find module '/scss/app.scss' imported from 'virtual:nuxt:C%3A%2FUsers%2Fzhaol%2FProjects%2Fbluevyfrontend-william%2F.nuxt%2Fcss.mjs' at ViteNodeRunner._fetchModule (C:/Users/zhaol/Projects/bluevyfrontend-william/nodemodules/.pnpm/vite-node@3.2.4@types+node_439163a0bc051d25d2296e3ba322d99e/node_modules/vite-node/dist/client.mjs:247:19) at process.processTicksAndRejections (node:internal/process/task_queues:105:5) at async ViteNodeRunner.directRequest (C:/Users/zhaol/Projects/bluevyfrontend-william/nodemodules/.pnpm/vite-node@3.2.4@types+node_439163a0bc051d25d2296e3ba322d99e/node_modules/vite-node/dist/client.mjs:268:44) at async ViteNodeRunner.cachedRequest (C:/Users/zhaol/Projects/bluevyfrontend-william/nodemodules/.pnpm/vite-node@3.2.4@types+node_439163a0bc051d25d2296e3ba322d99e/node_modules/vite-node/dist/client.mjs:189:11) at async ViteNodeRunner.dependencyRequest (C:/Users/zhaol/Projects/bluevyfrontend-william/nodemodules/.pnpm/vite-node@3.2.4@types+node_439163a0bc051d25d2296e3ba322d99e/node_modules/vite-node/dist/client.mjs:239:10) at async C:/Users/zhaol/Projects/bluevyfrontend-william/virtual:nuxt:C%3A%2FUsers%2Fzhaol%2FProjects%2Fbluevyfrontend-william%2F.nuxt%2Fcss.mjs:3:31) at async ViteNodeRunner.runModule (C:/Users/zhaol/Projects/bluevyfrontend-william/nodemodules/.pnpm/vite-node@3.2.4@types+node_439163a0bc051d25d2296e3ba322d99e/node_modules/vite-node/dist/client.mjs:397:4) at async ViteNodeRunner.directRequest (C:/Users/zhaol/Projects/bluevyfrontend-william/nodemodules/.pnpm/vite-node@3.2.4@types+node_439163a0bc051d25d2296e3ba322d99e/node_modules/vite-node/dist/client.mjs:375:3) at async ViteNodeRunner.cachedRequest
8 Replies
Hi @Zhaolin Lau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error message:
indicates that Nuxt (via Vite) is trying to import a SCSS file from an absolute path
Make sure you are referencing your SCSS file with the correct path. If your
Nuxt will not resolve
Ensure that
After fixing the path, restart your Nuxt dev server to clear any cached references. Summary:
This is a path resolution issue, not a problem with SCSS or Nuxt itself. Use the correct path in your config as shown above. The knowledge sources do not mention this exact error, but they do show correct usage of the
/scss/app.scss, but it cannot find it. This usually happens when the path to your SCSS file is incorrect in your Nuxt configuration.
How to fix:
1. Check your nuxt.config.tsMake sure you are referencing your SCSS file with the correct path. If your
app.scss is inside the assets/scss directory, you should use a relative path starting with ~/ (which resolves to your project root):
2. Do not use absolute paths like /scss/app.scssNuxt will not resolve
/scss/app.scss to your assets directory. Always use ~/assets/... or @/assets/....
3. Check the file existsEnsure that
app.scss actually exists at assets/scss/app.scss in your project.
4. Restart your dev serverAfter fixing the path, restart your Nuxt dev server to clear any cached references. Summary:
This is a path resolution issue, not a problem with SCSS or Nuxt itself. Use the correct path in your config as shown above. The knowledge sources do not mention this exact error, but they do show correct usage of the
css property in nuxt.config.ts for SCSS files, always using the ~/assets/... pattern, for example:
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:
----------------------<@520675622830342144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai this is my config:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
runtimeConfig: {
public: {
apiUrl: process.env.NUXT_PUBLIC_API_BASE_URL,
},
},
modules: [
'@pinia/nuxt',
'nuxt-quasar-ui',
'@nuxtjs/i18n',
'@unocss/nuxt',
'@element-plus/nuxt',
'@vueuse/nuxt',
],
css: ['~/assets/scss/app.scss'],
experimental: {
typedPages: true,
},
app: {
buildAssetsDir: '/assets/',
},
devtools: {
enabled: true,
},
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'zh', file: 'zh.json' },
{ code: 'ms', file: 'ms.json' },
],
defaultLocale: 'en',
},
quasar: {
sassVariables: '~/assets/scss/quasar.variables.scss',
config: {
dark: false,
screen: {
bodyClasses: true,
},
},
plugins: ['Notify', 'Dialog', 'Loading'],
},
})
Let me check the knowledge base for you again. One moment! :books:
----------------------
Your Nuxt config appears mostly correct for including a global SCSS file with:
However, based on your previous error (
Cannot find module '/scss/app.scss'), the issue is likely with the path resolution of your SCSS file. The correct usage is to use the ~/assets/scss/app.scss path, as you have done in your config. Make sure that:
1. The file actually exists at assets/scss/app.scss in your project directory.
2. There are no typos in the filename or directory names.
3. You do not use an absolute path like /scss/app.scss anywhere in your config or code, as Nuxt will not resolve this correctly. Always use ~/assets/... or @/assets/... for assets in your project root.
This pattern is confirmed in the knowledge sources, which show the correct way to include SCSS files globally in Nuxt 3 is with the ~/assets/... path in the css array of your config, for example:
Nuxt 3 + SASS: Can't use include paths with @import and @use
If you are still seeing the error, double-check that there are no other references to /scss/app.scss elsewhere in your project, and try restarting your dev server after making changes.
If the problem persists, the knowledge sources do not provide further troubleshooting steps for this specific error.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@520675622830342144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai this is nuxt 4
Let me check the knowledge base for you again. One moment! :books:
----------------------
Thank you for clarifying that you are using Nuxt 4. Based on the knowledge sources provided, the approach for including global SCSS files in Nuxt 4 remains the same as in Nuxt 3: you should use the
- Your config is correct for Nuxt 4. - Ensure there are no absolute
~/assets/... path in your css array within nuxt.config.ts. Your configuration:
is correct, provided that the file exists at assets/scss/app.scss in your project.
However, if you are still encountering the error:
this suggests that somewhere in your project or in a dependency, the path /scss/app.scss (absolute, starting with a slash) is being referenced, which Nuxt cannot resolve. The knowledge sources do not provide Nuxt 4-specific changes to this behavior, and the correct usage is still to use the ~/assets/... pattern for asset imports in the config. This is consistent with the guidance for Nuxt 3, as seen in this source.
If you have confirmed that your config uses the correct path and the file exists, but the error persists, the knowledge sources do not provide further Nuxt 4-specific troubleshooting steps for this issue. There is no mention of a change in how global SCSS is handled between Nuxt 3 and Nuxt 4 in the provided documentation.
Summary:- Your config is correct for Nuxt 4. - Ensure there are no absolute
/scss/app.scss references anywhere.
- The knowledge sources do not mention any Nuxt 4-specific changes to this behavior.
If you need more detailed Nuxt 4-specific troubleshooting, the knowledge sources do not contain enough information to provide a more specific answer.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@520675622830342144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.