أواجه نفس المشكلة بالضبط: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

نفس المشكلة هنا أيضًا: البكاء:
لقد وصفت مشكلتي هنا: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

أي تقدم؟ ما زلت أعاني من نفس المشكلة ولا يمكنني وضعها في الإنتاج.
تم الاختبار على 9.3.7-canary.9

تضمين التغريدة
الحالة: v9.3.7-canary.11 وما زالت المشكلة قائمة.

يبدو أننا نواجه مشكلة مماثلة مع مكونات من مكتبة مكونات مشتركة في monorepo - يتم تجاوز أي أنماط في تطبيقنا تؤثر على تلك المكونات بواسطة أنماط المكتبة ، على الرغم من حقيقة أن خصوصية الأنماط في ملفات CSS للتطبيق لدينا هي أعلى وبالتالي يجب أن تكون لها الأسبقية. يبدو جيدًا في وضع التطوير ، وليس الإنتاج :(

(نحن نستخدم وحدات SCSS مع @zeit/next-sass )

عندما كنت أستخدم @ zeit / next-sass أو @ zeit / next-css ، كان كل شيء على ما يرام مع الترتيب والتفضيل والتكرارات بين القطع. : التفكير:

بدأت المشكلة الحقيقية بالنسبة لي عندما قمت بتحديث nextjs إلى 9.3 وبدأت في استخدام وحدات css.

لقد جربت كلتا الطريقتين (التالي والمضمنة) - كانت المشكلة موجودة في كلتا الحالتين

مكدس بلدي:
1) وحدات CSS
2) SCSS
3) Dart-Sass مع استيراد use

جربت الكثير من الأشكال وهذا يناسبني (لا توجد أنماط مكررة):

1) package.json:

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"next": "9.2.1", (9.4.1 is current)
"node-sass": "npm:[email protected]", (this is dart sass, but can be used default)

2) next.config.js

const path = require('path')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const withBundleAnalyzer = require('@next/bundle-analyzer')({ // Optional, of course
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(
  withCSS(
    withSass({
      cssModules: true,
      sassLoaderOptions: {
        // Resolving SASS absolute imports
        includePaths: [path.resolve(__dirname, 'src')],
      },
      cssLoaderOptions: {
        importLoaders: 2,
        localIdentName:
          process.env.NODE_ENV === 'production'
            ? '[hash:base64]'
            : '[name]__[local]__[hash:base64:5]',
      },
      webpack(config, options) {
        // Resolving absolute imports
        config.resolve.modules.push(path.join(__dirname, 'src'))

        // Make global styles work
        config.module.rules.forEach(rule => {
          if (rule.test && rule.test.toString().includes('.scss')) {
            rule.rules = rule.use.map(useRule => {
              if (typeof useRule === 'string') {
                return {
                  loader: useRule,
                }
              }

              if (useRule.loader.startsWith('css-loader')) {
                return {
                  oneOf: [
                    {
                      test: new RegExp('.module.scss$'),
                      loader: useRule.loader,
                      options: useRule.options,
                    },
                    {
                      loader: useRule.loader,
                      options: {},
                    },
                  ],
                }
              }
              return useRule
            })
            delete rule.use
          }
        })

        return config
      },
    }),
  ),
)

3) استيراد الأنماط العامة (وليس الوحدات النمطية) مثل هذا:

index.scss:

...
<strong i="19">@import</strong> '~emoji-mart/css/emoji-mart.css';
...

سيكون رائعًا ، إذا حاول شخص ما مثل هذا التكوين ، لذلك يمكنني التأكد من أن هذا يعمل حقًا.

أقترح استبدال هذا:

.other-page__component-override { background: pink; }

مع هذا:

.other-page .component-override { background: pink; }

لذا فإن الأنماط الخاصة بالصفحة تنطبق فقط على تلك الصفحة المحددة =).

أواجه مشكلة مع هذا الخطأ أيضًا.
لقد غيرت ملف css التالي إلى css المدمج وحدث ذلك.
إنه يعمل في وضع التطوير ، لكنه لا يعمل في وضع الإنتاج عند استخدام المسؤولية الاجتماعية للشركات. في SSR ، لا توجد مشكلة.

أستخدم 9.4.4 التالي مع دعم css المدمج ولدي هذه المشكلة أيضًا ، إنها تحدث في الإنتاج.

نفس المشكلة في التالي 9.4.4. فقط في وضع الإنتاج

يحدث هذا لبيئة الإنتاج في 9.4.4 التالي ، وبطريقة ما توصلنا إلى حل.

باستخدام node-sass ، نجرب خيارات متنوعة من المستند ، ونحل هذه المشكلة بإضافة sassOptions إلى next.config.js

module.exports = {
  ...,
  sassOptions: {
    outputStyle: 'expanded',
  },
}

المرجع: نمط الإخراج

بعد التحقق من اسم فئة css بعد next build ، يبدو أن هذا يعمل.
أتمنى أن يساعدك هذا!

شكرًا لمشاركة @ Howard86 ، حاولت لكنها لم تنجح هنا. نحن نستخدم next-css و next-sass في تصميماتنا أيضًا (وليس دعم CSS المدمج من التالي ، ولدينا نفس المشكلة الموضحة في هذه المشكلة) ، ويحدث التكرار في فئات قادمة من css خالص مستورد كـ css- الوحدات ، التي لا تأتي من أنماط ساس

@ Howard86 @ alexandre-marchina

أنا أستخدم CSS مدمجًا من التالي ، 9.4.4 التالي والحل الذي قدمته أيضًا لا يعمل معي. :يبكي:

لدي نفس المشكلة مع antd والأحدث المقبل 😞

المشكلة نفسها . تحميل css مثالي في dev ولكن في المنتج لا يتم تحميل بعض أجزاء css

نفس المشكلة هنا أيضًا.

واجهت نفس المشكلات مع الإصدار 9.5.1 التالي على إنشاء المنتج ، وفي إنشاء المطورين ، تكون الأنماط على ما يرام.

هذا الخطأ يجعل استخدام وحدات css في next.js مستحيلاً (لأن لا أحد يريد الإضافة! مهم في الأنماط)

هذا الخطأ يجعل استخدام وحدات css في next.js مستحيلاً (لأن لا أحد يريد الإضافة! مهم في الأنماط)

يمكنك زيادة خصوصية الأنماط التي تتجاوز الأنماط الأساسية. على سبيل المثال ، دعونا نحصل على تبعية للمكونات مثل Button <- IconButton <- MoreSpecificButton. في هذه الحالة ، يكون لـ Button أنماطه الخاصة التي يتم إعادة تحميلها عند التبديل إلى صفحة أخرى ، وبالتالي يتجاوز الأنماط من IconButton و MoreSpecificButton. إذا كان IconButton له أنماطه المحددة على أنها .className.className ، وكان MoreSpecificButton له أنماطه مثل .className.className أيضًا ، فلن يتجاوزه الزر. ووجود حقيقة أن ترتيب أنماط IconButton و MoreSpecificButton صحيح في css ، فإن أنماط MoreSpecificButton ستتجاوز دائمًا IconButton - المتوقع.

واجهت نفس المشكلات مع الإصدار 9.5.1 التالي على إنشاء المنتج ، وفي إنشاء المطورين ، تكون الأنماط على ما يرام.

أواجه نفس المشكلة.

+1 مع Tailwind و Bootstrap. الحل الحالي هو استيراد جميع الأنماط عبر الرابط rel في _document.js. بالنسبة إلى Tailwind ، يُعد بناء css مخصصًا. هذه المشكلة مزعجة للغاية.

أنا أستخدم وحدات css مع tailwind (استيراد css عمومي عادي). أدى تضمين css إلى حل ترتيب التحميل ، لكنني لا أعرف ما إذا كان لا يزال مكررًا ، إنه مجرد حل بديل. في الإنتاج ، لم ألاحظ أسلوبًا يتخطى الآخر.

https://github.com/vercel/next-plugins/issues/238#issuecomment -432211871

تم إصلاح هذا في أحدث إصدار من Next.js canary. الرجاء الترقية إلى next@^9.5.3-canary.7 وأخبرنا!

لا يصلحها بالنسبة لي ، على سبيل المثال ، تختلف ارتفاعات الخطوط وأوزان الخطوط وألوان الخلفية والحدود في dev و prod.

talaikis ، يرجى فتح إصدار جديد مع عرض توضيحي قابل للتكرار بالكامل بعد ذلك! لقد اختبرت الكود الدقيق الوارد في هذا الاستنساخ وعمله على canary الآن.

إصلاح لي ، لكنه يسبب مشكلة أخرى أكثر خطورة.
في حالتي عندما أقوم بتغيير عنوان url للتجزئة فقط باستخدام Router.push( localhost: 3000 / # change ) coming from localhost: 3000 `إعادة تحميل جميع صفحات الأنماط مرة أخرى مما تسبب في وميض الشاشة.

هل يمكنك تجربة 9.5.3-canary.9 فضلك؟

Timer يعمل npm i :

لقد جربت 9.5.3-canary.9 ولكن لا تزال مشكلة التجزئة مستمرة.

لم أذكر ذلك ، لكنني أستخدم 9.5.2 وعندما انتقلت إلى 9.5.3-canary.6 هناك أيضًا خطأ في وحدة تحكم devtools عند استخدام جهاز التوجيه لتغيير التجزئة كما هو موضح أعلاه.
المشكلة غير موجودة في 9.5.3-canary.5 .

fabinppk يرجى فتح مشكلة جديدة مع النسخ!

أردت فقط تأكيد أن المشكلة الأصلية قد تم إصلاحها في 9.5.3-canary.9 . شكرا لك @ Timer

شكرا لتأكيدpetewarman!

Timer متأكد. أعتقد أن الإصلاح الخاص بك لا بأس به ولا يتعلق بهذه المشكلة في devtools.
شكرا لك. : +1:

يمكن تأكيد أن هذا لا يزال يحدث مع 9.5.6-canary.11 ، يتم تكرار الفصول الدراسية عبر الأجزاء.

glottonous تم حل جميع المشاكل

ملاحظة: أنا أستخدم 9.5.5. 👌👌

fabinppk يمكنني أن أؤكد أن نفس المشكلة لا تزال تحدث اعتبارًا من 9.5.6-canary.11 .

glottonous لقد أجريت بعض الاختبارات على مشروعي بالإصدار 9.5.6-canary.11 ولم أواجه أي مشاكل.

إذا كنت تواجه مشكلة بالفعل ، فافتح مشكلة جديدة بالرجوع إلى هذه المشكلة. : +1:

في nextjs 10 ، نفس المشكلات

نفس القضايا 10.0.1

لقد بدأت # 19055 بعرض توضيحي قابل للتكرار.