خطأ ناتج عن 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية