Next.js Discord

Discord Forum

SASS hanging with nextjs

Unanswered
Ganav posted this in #help-forum
Open in Discord
GanavOP
I have a vanilla nextjs app and am trying to use sass. The project layout is:


variable.module.scss:
$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

page.tsx:
import variables from '../../styles/variables.module.scss'

// it also fails for 

import variables from '../../styles/variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

layout.tsx:
export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">      
        <body>{children}</body>
      </html>
    )
  }


and

next.config.ts:

import type { NextConfig } from "next";
import path from "path";

const nextConfig: NextConfig = {
  /* config options here */
  /* sass https://nextjs.org/docs/app/building-your-application/styling/sass */
  sassOptions: {
    implementation: 'sass-embedded',
    includePaths: [path.join(__dirname, 'styles'), path.join(__dirname, 'app/css-sass')],    
  },
};

export default nextConfig;


run output:

$ npm run dev

> starter@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.1.0 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.56.1:3000

 ✓ Starting...
 ✓ Ready in 2.2s
 ○ Compiling / ...
 ✓ Compiled / in 4.2s
 GET / 200 in 4524ms
 ○ Compiling /css-sass ...


It hangs forever on compiling.

1 Reply

GanavOP
WTF? Commented out the sass paths in next.config.ts:

const nextConfig: NextConfig = {
/* config options here /
/ sass https://nextjs.org/docs/app/building-your-application/styling/sass */
// sassOptions: {
// implementation: 'sass-embedded',
// includePaths: [path.join(dirname, 'styles'), path.join(dirname, 'app/css-sass')],
// },
};

and now it's working? Sheeet....