خطأ ناتج عن sass في nextjs

عبد النور محمد · 27 يونيو 2021

لدي ملف style.sass فيه استيرادات

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

وهذا الاعدادت الخاصة ب next

  const withSass = require('@zeit/next-sass')
  module.exports = withSass({
  cssModules: true
})

وكنت استورد style.sass في navbar


import '../global-styles/main.scss';

const Navbar = (props) => (
  <div>
  .....
  </div>
);

export default Navbar;

وحدث هذا الخطأ معي

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

عبدالله عبدالرحمن11 · 27 يونيو 2021

استخدم أداة تحميل Next.js CSS المدمجة بدلاً من أداة التحميل @zeit/next-sass.

استبدل حزمة @zeit/next-sass بـ sass.
أزل next.config.js. أو لا تغير تحميل CSS فيه.
انقل CSS العام global كما هو مقترح في رسالة الخطأ.

/pages/_app.js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

لم يكن لديك هذا الخطأ من قبل لأن Next.js أسقط دعم CSS العام global في ملفات غير /pages/_app.js فقط في الإصدارات الأخيرة

لإضافة التنسيقات إلى مكون أو صفحة معينة فقط ، يمكنك استخدام الدعم المدمج لوحدات CSS . التوثيق الرسمي لدعم CSS المُدمج

على سبيل المثال ، إذا كان لديك مكون ، Button.js فيمكنك إنشاء ملف Sass button.module.scss وإدراجه في المكون.

خطأ ناتج عن sass في nextjs

السؤال

عبد النور محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

عبدالله عبدالرحمن11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية