Next.js: सीएसएस विखंडू में डुप्लिकेट की गई शैलियाँ स्रोत क्रम के मुद्दे बनाती हैं

को निर्मित 30 अप्रैल 2020 · 42टिप्पणियाँ · स्रोत: vercel/next.js

बग रिपोर्ट

बग का वर्णन करें

मेरे पास एक एप्लिकेशन है जो कई पृष्ठों पर एक घटक का उपयोग करता है। जब मैं उस परियोजना का निर्माण करता हूं जिसमें घटक की शैलियों को प्रासंगिक सीएसएस पृष्ठ के प्रत्येक भाग में डुप्लिकेट किया जाता है; यह दृश्य कीड़े बनाता है।

उदाहरण के लिए ( some-component , और initial-page-component-override प्रारंभिक पृष्ठ पर DOM में उसी तत्व पर लागू की गई कक्षाएं हैं):

प्रारंभिक-page.chunk.css

// component styles
.some-component { margin-bottom: 10px; }

// page specific override
.initial-page-component-override { margin-bottom: 20px; }

दूसरी page.chunk.css

// component styles
.some-component { margin-bottom: 10px; }

जब DOM के लिए दूसरे-page.chunk.css को जोड़ा जाता है, तो प्रारंभिक पृष्ठ में परिभाषित किसी भी पृष्ठ विशिष्ट शैलियों के शीर्ष पर घटक शैलियों को फिर से लागू किया जाता है। ओवरराइड खो गए हैं और गलत मार्जिन अब प्रारंभिक पृष्ठ पर घटक पर लागू होता है। एनबी यह केवल उत्पादन में देव मोड में एक मुद्दा नहीं है।

प्रजनन करना

व्यवहार को पुन: उत्पन्न करने के लिए कदम, कृपया कोड स्निपेट या एक रिपॉजिटरी प्रदान करें:

चेकआउट https://github.com/petewarman/nextjs-css-module-issue
npm i , npm run build , npm start
चूने के हरे बटन पर कर्सर घुमाएं
दूसरे पृष्ठ की स्टाइलशीट प्री लोड होने पर इसे गुलाबी में बदलें

अपेक्षित् व्यवहार

शैली की घोषणाओं को संकलित स्टाइलशीट में दोहराया नहीं जाना चाहिए। घटक शैलियों को पृष्ठ विशिष्ट शैलियों के ऊपर (अपने स्वयं के चंक में) लोड किया जाना चाहिए।

प्रणाली की जानकारी

OS: macOS
Next.js का संस्करण: 9.3.6
Node.js का संस्करण: 10.16.3

bug 3

स्रोत

petewarman

👍26

सबसे उपयोगी टिप्पणी

मुझे ठीक वैसी ही समस्या हो रही है: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

iksent 30 अप्रैल 2020

👍8

सभी 42 टिप्पणियाँ

मुझे ठीक वैसी ही समस्या हो रही है: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

iksent 30 अप्रैल 2020

👍8

यहाँ भी वही समस्या: रोना:
मैंने यहाँ अपनी समस्या का वर्णन किया: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

fabinppk 30 अप्रैल 2020

👍7

कोई प्रगति? मेरे पास अभी भी वही समस्या है और मैं इसे उत्पादन में नहीं डाल सकता।
9.3.7-canary.9 पर परीक्षण किया गया

EduardoPedrosa 5 मई 2020

@EduardoPedrosa
स्थिति: v9.3.7-canary.11 और समस्या अभी भी बनी हुई है।

fabinppk 5 मई 2020

👍4

हमें अपने मोनोरपो में एक साझा घटक पुस्तकालय से घटकों के साथ एक समान समस्या हो रही है - हमारे ऐप में कोई भी शैली जो उन घटकों को प्रभावित करती है, लाइब्रेरी शैलियों द्वारा ओवरराइड की जाती है, इस तथ्य के बावजूद कि हमारे ऐप में शैलियों की विशिष्टता सीएसएस फाइलों में है उच्च और इसलिए पूर्वता लेनी चाहिए। यह देव मोड में ठीक लगता है, बस उत्पादन नहीं :(

(हम @zeit/next-sass साथ SCSS मॉड्यूल का उपयोग कर रहे हैं)

sophiekoonin 12 मई 2020

👍7

जब मैं @ zeit / next-sass या @ zeit / next-css का उपयोग कर रहा था, तो सब कुछ क्रम, वरीयता और डुप्लिकेट के बीच डुप्लिकेट के साथ बहुत ठीक था। :विचारधारा:

मेरे लिए असली समस्या तब शुरू होती है जब मैंने 9.3 में अगली बार अद्यतन किया और सीएसएस मॉड्यूल का उपयोग करना शुरू कर दिया।

fabinppk 13 मई 2020

मैंने दोनों तरीकों (अगले-एसएएस और बिल्ट-इन) की कोशिश की - समस्या दोनों मामलों में मौजूद थी

iksent 14 मई 2020

👍7

मेरा ढेर:
1) सीएसएस मॉड्यूल
2) एस.सी.एस.एस.
3) @ आयात के साथ डार्ट-सैस

बहुत सारे बदलावों की कोशिश की और यह मेरे लिए काम करता है (कोई स्टाइल डुप्लिकेट नहीं है):

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';
...

यह बहुत अच्छा होगा, अगर कोई ऐसे कॉन्फ़िगरेशन की कोशिश करता है, तो मैं यह सुनिश्चित कर सकता हूं कि यह वास्तव में काम करता है।

iksent 18 मई 2020

मैं इसे बदलने का सुझाव देता हूं:

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

इसके साथ:

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

तो पृष्ठ-विशिष्ट शैलियाँ केवल उस विशिष्ट पृष्ठ पर लागू होती हैं =)।

MurkyMeow 13 जून 2020

मुझे इस बग से भी परेशानी हो रही है।
मैंने अगली सीएसएस को बिल्ट-इन सीएसएस में बदल दिया और यह हुआ।
यह विकास मोड में काम करता है, लेकिन CSR का उपयोग करने पर यह उत्पादन मोड में काम नहीं करता है। SSR में, कोई समस्या नहीं है।

p-chan 10 जुल॰ 2020

👍4

मैं अगले 9.4.4 में निर्मित सीएसएस समर्थन के साथ उपयोग करता हूं और मुझे यह समस्या है, यह उत्पादन में होता है।

kambala3000 10 जुल॰ 2020

👍4

अगली 9.4.4 पर भी यही समस्या है। केवल उत्पादन मोड में

GrefriT 11 जुल॰ 2020

👍5

यह हमारे उत्पादन env पर अगले 9.4.4 पर होता है, और किसी तरह हम एक समाधान मिला।

node-sass का उपयोग करते हुए, हम डॉक्टर से विभिन्न विकल्पों का प्रयास करते हैं, और इसे हल करके एक नया sassOptions next.config.js जोड़ते हैं

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

संदर्भ: outputStyle

next build बाद css क्लासनाम की जाँच करने के बाद, यह काम करने लगता है।
उम्मीद है की यह मदद करेगा!

Howard86 15 जुल॰ 2020

👀3 😕3

@ Howard86 को साझा करने के लिए धन्यवाद, कोशिश की गई लेकिन यह यहाँ काम नहीं किया। हम अपने बिल्ड पर नेक्स्ट-सीएसएस और नेक्स्ट-सैस का भी इस्तेमाल कर रहे हैं (न कि बिल्ट-इन सीएसएस सपोर्ट अगले से, और इस इश्यू में बताई गई वही प्रॉब्लम), और डुप्लिकेटेशन सीएसएस के रूप में इंपोर्ट होने वाले प्योर सीएसएस से आने वाली क्लासेस में होता है। मॉड्यूल, जो सैस शैलियों से नहीं आते हैं

alexandre-marchina 15 जुल॰ 2020

@ हॉवर्ड 86 @ अलेक्जेंडर-मर्चिना

मैं अगले में, अगले 9.4.4 से अंतर्निहित CSS का उपयोग कर रहा हूं और आपके समाधान ने भी मेरे लिए काम नहीं किया। :रोना:

fabinppk 16 जुल॰ 2020

👍3

मैं atd और अगले नवीनतम same के साथ एक ही समस्या है

qipoy 27 जुल॰ 2020

वही मुद्दा । देव में सीएसएस लोड सही है, लेकिन उत्पाद में सीएसएस के कुछ हिस्सा लोड नहीं होता है

AurangzaibRamzan 4 अग॰ 2020

यहाँ भी वही मुद्दा।

bherila 5 अग॰ 2020

अगले v9.5.1 उत्पादों के निर्माण पर समान मुद्दों का अनुभव, देव बिल्ड पर शैलियों ठीक हैं।

VictorPivnenko 6 अग॰ 2020

👍7 👀1

यह बग अगले सीएसएस-मॉड्यूल का उपयोग असंभव बनाता है (क्योंकि कोई भी जोड़ना नहीं चाहता है! शैलियों में महत्वपूर्ण!)

marcin-piela-sf 11 अग॰ 2020

यह बग अगले सीएसएस-मॉड्यूल का उपयोग असंभव बनाता है (क्योंकि कोई भी जोड़ना नहीं चाहता है! शैलियों में महत्वपूर्ण!)

आप मूल शैलियों को ओवरराइड करने वाली शैलियों के लिए विशिष्टता को टक्कर दे सकते हैं। उदाहरण के लिए, आइए बटन <- IconButton <- MoreSpecificButton के रूप में घटक निर्भरता है। इस स्थिति में, बटन की अपनी शैलियाँ होती हैं जो दूसरे पृष्ठ पर जाने पर पुनः लोड हो जाती हैं और इसलिए IconButton और MoreSpecificButton से शैलियों को ओवरराइड करती हैं। यदि IconButton की अपनी शैलियों को .className.className रूप में परिभाषित किया गया है, और MoreSpecificButton की शैली .className.className है, तो बटन इसे ओवरराइड नहीं करेगा। और तथ्य यह है कि IconButton और MoreSpecificButton शैलियों का क्रम css में सही है MoreSpecificButton की शैलियों हमेशा IconButton को ओवरराइड करेगी - अपेक्षित।

VictorPivnenko 11 अग॰ 2020

👎3 👍2

अगले v9.5.1 उत्पादों के निर्माण पर समान मुद्दों का अनुभव, देव बिल्ड पर शैलियों ठीक हैं।

मैं एक ही मुद्दे का अनुभव कर रहा हूं।

ysthedood 11 अग॰ 2020

👍1

टेलविंड, बूटस्ट्रैप के साथ +1। वर्तमान वर्कअराउंड सभी शैलियों को _document.js में लिंक rel के माध्यम से आयात करना है। टेलविंड के लिए यह कस्टम सीएसएस बिल्ड है। यह समस्या बहुत कष्टप्रद है।

talaikis 11 अग॰ 2020

👍1

मैं टेलविंड (सामान्य वैश्विक सीएसएस आयात) के साथ सीएसएस मॉड्यूल का उपयोग कर रहा हूं। Inlining css ने लोड ऑर्डरिंग को हल किया, लेकिन मुझे नहीं पता कि क्या यह अभी भी डुप्लिकेट है, यह सिर्फ एक वर्कअराउंड है। उत्पादन में, मैं एक शैली को किसी अन्य को नजरअंदाज नहीं करता था।

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

lucasmogari 11 अग॰ 2020

यह नवीनतम Next.js कैनरी पर तय किया गया है। कृपया next@^9.5.3-canary.7 अपग्रेड करें और हमें बताएं!

Timer 18 अग॰ 2020

👍3

मेरे लिए इसे ठीक नहीं करता है, उदाहरण के लिए, लाइन हाइट्स, फॉन्ट वेट, बैकग्राउंड कलर, बॉर्डर देव और प्रोडक्ट्स में अलग हैं।

talaikis 18 अग॰ 2020

👍1

@talaikis कृपया फिर से एक पूरी तरह से प्रतिलिपि प्रस्तुत करने योग्य डेमो के साथ एक नया मुद्दा खोलें! मैंने इस प्रजनन में दिए गए सटीक कोड और canary अब काम कर रहा है।

Timer 18 अग॰ 2020

मुझे ठीक करें, लेकिन यह एक और गंभीर समस्या का कारण बनता है।
मेरे मामले में जब मैं Router.push( लोकलहोस्ट का उपयोग करके केवल हैश url बदलता हूं ) coming from स्थानीयहोस्ट: 3000 `सभी स्टाइलशीट फिर से स्क्रीन ब्लिंक का कारण बनते हैं।

fabinppk 18 अग॰ 2020

क्या आप कृपया 9.5.3-canary.9 कोशिश कर सकते हैं?

Timer 18 अग॰ 2020

👍1

@ टिमर npm i चल रहा है:

fabinppk 18 अग॰ 2020

मैं 9.5.3-canary.9 का प्रयास किया था, लेकिन इसकी अभी भी हैश के साथ समस्या बनी हुई है।

मैंने इसका उल्लेख नहीं किया है, लेकिन मैं 9.5.2 का उपयोग कर रहा हूं और जब मैंने 9.5.3-canary.6 माइग्रेट किया था तो ऊपर दिए गए हैश को बदलने के लिए राउटर का उपयोग करने पर devtools कंसोल में एक त्रुटि भी है।
समस्या 9.5.3-canary.5 में मौजूद नहीं है।

fabinppk 18 अग॰ 2020

@fabinppk कृपया प्रजनन के साथ एक नया मुद्दा खोलें!

Timer 19 अग॰ 2020

बस मूल मुद्दे की पुष्टि करना चाहता था 9.5.3-canary.9 में तय किया गया लगता है। धन्यवाद @Timer

petewarman 19 अग॰ 2020

👍1

@Petewarman की पुष्टि के लिए धन्यवाद!

Timer 19 अग॰ 2020

@ टाइमर सुनिश्चित करें। मुझे लगता है कि आपका यह ठीक है और इसके devtools में इस समस्या से संबंधित नहीं है।
धन्यवाद। : +1:

fabinppk 19 अग॰ 2020

👍1

पुष्टि कर सकते हैं कि यह अभी भी 9.5.6-canary.11 साथ हो रहा है, वर्गों को विखंडू में दोहराया गया है।

ghost 22 अक्तू॰ 2020

इस मुद्दे में टिप्पणी की गई @glottonous टाइमर द्वारा हल की गई थी।

Ps: मैं 9.5.5 का उपयोग कर रहा हूं। 👌👌

fabinppk 23 अक्तू॰ 2020

@fabinppk मैं पुष्टि कर सकता हूं कि अभी भी 9.5.6-canary.11 रूप में एक ही मुद्दा बन रहा है।

ghost 23 अक्तू॰ 2020

👍1

@ लेगिंगोनोसस मैंने अपने प्रोजेक्ट पर 9.5.6-canary.11 साथ कुछ परीक्षण किए और मुझे कोई समस्या नहीं हुई।

यदि आपको वास्तव में कोई समस्या हो रही है, तो इसे संदर्भित करके एक नया मुद्दा खोलें। : +1:

fabinppk 23 अक्तू॰ 2020

अगली 10 में, वही मुद्दे

stfenjobs 3 नव॰ 2020

😕3

वही मुद्दों 10.0.1

Edward-Fedoruk 13 नव॰ 2020

😕2

मैंने # 19055 को एक प्रतिलिपि प्रस्तुत करने योग्य डेमो के साथ शुरू किया है।

guilhermehn 13 नव॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Next.js: सीएसएस विखंडू में डुप्लिकेट की गई शैलियाँ स्रोत क्रम के मुद्दे बनाती हैं

बग रिपोर्ट

बग का वर्णन करें

प्रजनन करना

अपेक्षित् व्यवहार

प्रणाली की जानकारी

सबसे उपयोगी टिप्पणी

सभी 42 टिप्पणियाँ

संबंधित मुद्दों