Next.js Tailwindcss Sass compilation issue

Question

I built a basic template from tailwind for Next.js.

I usually use Tailwind's @layer components to add custom css code

But this time I wanted to use Sass and changed the globals.css to globals.scss when I encountered an error

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[9].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[9].use[4]!./styles/globals.scss SassError: expected "{". ╷ 12 │ @apply text-white w-screen #-{important} h-screen #-{important} font-["-apple-system","poppins"]; │

here is my globals.scss :

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/Header/Header.module.css";
@import "tailwindcss/utilities";

@layer base {
  body {
    @apply text-white w-screen #-{important} h-screen #-{important} font-["-apple-system","poppins"];
  }

  a {
    @apply active:bg-[#ffffff]/20 #-{important}  focus:bg-[#ffffff]/20;
  }
}
@layer components {
  .filter-white {
    filter: invert(93%) sepia(91%) saturate(32%) hue-rotate(336deg)
      brightness(107%) contrast(99%);
  }

  .navbar {
    @apply p-0 #-{important} min-h-[4px]  !bg-[#141414]/20 backdrop-blur-lg text-sm leading-[4px] #-{important};
  }
}

tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Help a fellow Out!

Answer 1

Looks like you donot have sass package installed.

Use npm install --save-dev sass or yarn add -D sass to use the functionality of sass in nextjs

Refer https://nextjs.org/docs/basic-features/built-in-css-support