SASS is not mapped correctly, seeing layout.css?...42345:29 instead

[nikmace]

Current versus Expected behavior

Currently, I’ve upgraded the project from Next 13 to 14 using the official guide. I’ve been using Sass before and all the file mappings for the styles in the dev tools were correct.

My next.config.js is:

const path = require("path");
const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "scss")],
    sourceMap: true,
  },
  productionBrowserSourceMaps: true,
  images: {
    domains: ["via.placeholder.com"],
  },
  async redirects() {
    return [
      {
        source: "/",
        destination: "/collections",
        permanent: false,
      },
    ];
  },
};

module.exports = withPlugins([withBundleAnalyzer], nextConfig);

This worked fine in Next 13.

Code, configuration, and steps that reproduce this issue

This is my code structure:

I import all the styles in app/layout.tsx: import "../scss/main.scss";
The styles apply in when running next dev but the problem is I do not see the correct file mappings in the dev tools styles section. Note: I have dev tools configured to show mappings and they did show normally in Next 13.

Here is a screenshot of how they look now:

It is pointing to already compiled Sass styles http://localhost:3000/_next/static/css/app/layout.css?v=1727673126667. But supposed to point to the exact file where this styles is.

Could you assist here, maybe I am missing something?

Project information

Deployment URL: none
Environment (local, preview, production): local
Project Framework: NextJS 14.2.13
Build Settings:
  Framework Preset:
  Build Command (if not default): default
  Output Directory (if not default): default
  Install Command (if not default): default
Node/Runtime Version: v20.11.1
Package Manager: yarn v1.22.22
Relevant Packages:

[amyegan]

Hey @nikmace. I’m not able to replicate the issue using a fresh Next.js boilerplate project. Are you able to share a minimal reproducible example so I can take a closer look?