Next.js Tailwindcss Sass 編譯問題

Question

我從 tailwind 為 Next.js 構建了一個基本模板。

我通常使用 Tailwind 的@layer components來添加自定義 css 代碼

但是這次想用Sass，遇到錯誤時把globals.css改成了globals.scss

錯誤 - ./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: 預期“{”。 ╷ 12 │ @apply text-white w-screen #-{important} h-screen #-{important} font-["-apple-system","poppins"]; │

這是我的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: [],
};

幫助一個家伙出去！

Answer 1

看起來你沒有安裝 sass 包。

使用npm install --save-dev sass或yarn add -D sass sass 在 nextjs 中使用 sass 的功能

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