[英]Next.js Tailwindcss Sass compilation issue
I built a basic template from tailwind for Next.js.我从 tailwind 为 Next.js 构建了一个基本模板。
I usually use Tailwind's @layer components
to add custom css code我通常使用 Tailwind 的
@layer components
来添加自定义 css 代码
But this time I wanted to use Sass and changed the globals.css to globals.scss when I encountered an error但是这次想用Sass,遇到错误时把globals.css改成了globals.scss
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 "{".
错误 - ./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"];
╷ 12 │ @apply text-white w-screen #-{important} h-screen #-{important} font-["-apple-system","poppins"]; │
│
here is my globals.scss
:这是我的
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
: 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!帮助一个家伙出去!
Looks like you donot have sass package installed.看起来你没有安装 sass 包。
Use npm install --save-dev sass
or yarn add -D sass
to use the functionality of sass in nextjs使用
npm install --save-dev sass
或yarn add -D sass
sass 在 nextjs 中使用 sass 的功能
Refer https://nextjs.org/docs/basic-features/built-in-css-support参考https://nextjs.org/docs/basic-features/built-in-css-support
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.