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: noneEnvironment (local, preview, production): localProject Framework: NextJS 14.2.13Build Settings: Framework Preset: Build Command (if not default): default Output Directory (if not default): default Install Command (if not default): defaultNode/Runtime Version: v20.11.1Package Manager: yarn v1.22.22Relevant Packages: