Next.js Discord

Discord Forum

SASS styles do not have source maps when developing locally

Unanswered
nkmctsh posted this in #help-forum
Open in Discord
Avatar
I am trying to see the source maps like in NextJS 13 when developing locally, currently using NextJS 15.0.3, the latest one. I do not have postcss-config or anything in next.config.js (no custom webpack script for sass). The only styles I see are page.css?v=1731087779531 and layout.css?v=1731087779531 which is really bad and I have to manually search where I have put the styles.. What am I missing?

In the production site I can see all the source maps.

My tsconfig.json
{
  "compilerOptions": {
    "target": "ES2021",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}


Thanks in advance,

And kind regards

3 Replies

Avatar
Nobody knows anything? I am trying the starter templates like this one for example and I am seeing the same thing where all styles are in layout.css..

https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter/tree/main
Avatar
I also have styles that overwrite each other, but I am importing the *.module.scss only once, and I have no idea where the duplication comes from
Image
Here is my project structure for reference:

I am using new app directory. And importing the styles in app/layout.tsx
Image