Next.js: normalize.css का उपयोग करने का पसंदीदा तरीका?

को निर्मित 8 दिस॰ 2016 · 27टिप्पणियाँ · स्रोत: vercel/next.js

एक प्रदर्शनकारी तरीके से normalize.css (आदर्श रूप से NPM से) लोड करने का आदर्श तरीका क्या है? मैं इसे एक स्थिर संपत्ति के रूप में लोड करने से बचना चाहता हूं और केवल एक छोटे से सीएसएस के लिए हेडर अनुरोध पेश करना चाहता हूं।

ग्लैमर में glamor/reset अतिरिक्त है, लेकिन यह सामान्य से बहुत आसान है, और जो मैं ढूंढ रहा हूं वह नहीं (मुझे वास्तव में यकीन नहीं है कि ग्लैमर में अतिरिक्त कैसे लोड किया जाए)।

स्रोत

drwpow

👍2

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

@jaydenseric आप सही हैं कि normalize.css CSS का jQuery है। ब्राउज़र अभी भी HTML तत्वों की अपनी डिफ़ॉल्ट स्टाइलिंग में काफी असंगत हैं, normalize.css उस समस्या से निपटने में मदद करता है। आधुनिक परियोजनाओं के लिए लीगेसी ब्राउज़र समर्थन के लिए normalize.css एक आवश्यकता है।

btnwtn 9 अप्रैल 2017

👍66 🎉2 👎1

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

आप next/head का उपयोग कर सकते हैं।

nkzawa 9 दिस॰ 2016

👎19

@nkzawa मैंने कुछ वैश्विक शैलियों को लोड करने के लिए next/head का उपयोग किया है, लेकिन परियोजना पर css-loader के बिना, मुझे node_modules से CSS फ़ाइल की आवश्यकता कैसे हो सकती है? और क्या यह उपयोगकर्ता के अंत में कैश करने योग्य है या क्या यह प्रत्येक हेडर अनुरोध पेलोड को उड़ा देता है?

drwpow 9 दिस॰ 2016

आप style को next/head $ में टेक्स्ट के रूप में परिभाषित करना चाहेंगे जैसे:

<Head>
  <style>{`
    body {
      margin: 0;
    }
  `}</style>
</Head>

आपको normalize.css से .json या एक घटक को require में बदलना होगा, लेकिन यह अब IMO के लिए सबसे अच्छा तरीका होगा। यदि आपको सभी पृष्ठों पर फ़ाइल की आवश्यकता है, तो यह एक चंक के रूप में बंडल करता है और केवल एक बार लोड होता है, इसलिए यह पेलोड को ब्लोट नहीं करेगा।

https://github.com/zeit/next.js/pull/222 जारी होने पर आप css-loader भी उपयोग कर पाएंगे।

nkzawa 9 दिस॰ 2016

धन्यवाद। मैंने यही पाया, लेकिन यह नहीं पता था कि वर्तमान में इसे लोड करने का एक और स्वचालित तरीका है या नहीं। मुझे लगता है कि मैं अगली हिट से पहले कनवर्ट करने के लिए स्थानीय रूप से वेबपैक या गल्प चला सकता हूं।

और यह जानना अच्छा है कि अगला सामान्य चंकिंग का उपयोग करता है। मैं अब सामान को सिर में डालने के बारे में बेहतर महसूस करता हूं। मेरे सवालों का जवाब देने के लिए धन्यवाद!

9 दिसंबर 2016 को 01:11 बजे, Naoyuki Kanezawa [email protected] ने लिखा:
आप शैली को अगले/सिर में टेक्स्ट के रूप में परिभाषित करना चाहते हैं जैसे:

आपको normalize.css को .json या आवश्यकता के लिए एक घटक में बदलना होगा, लेकिन यह अब IMO के लिए सबसे अच्छा तरीका होगा। यदि आपको सभी पृष्ठों पर फ़ाइल की आवश्यकता है, तो यह एक चंक के रूप में बंडल करता है और केवल एक बार लोड होता है, इसलिए यह पेलोड को ब्लोट नहीं करेगा।
#222 जारी होने पर आप css-loader का भी उपयोग कर पाएंगे।
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने सूत्र को लिखा है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या थ्रेड को म्यूट करें।

drwpow 9 दिस॰ 2016

यह बताना चाहेंगे कि ग्लैमर वास्तव में normalize.css का उपयोग करता है, यद्यपि एक पुराना संस्करण v3.0.2
https://github.com/threepointone/glamour/blob/master/src/reset.js

एक पुल अनुरोध किया
https://github.com/threepointone/glamour/pull/154

बस import 'glamor/reset' आयात करना ठीक काम करता है।

मेरे कांटे का उपयोग करने के लिए स्वतंत्र महसूस करें यदि आपको 5.0 की आवश्यकता है या पुल अनुरोध के विलय की प्रतीक्षा करें :)

FrancosLab 13 दिस॰ 2016

👍7 🎉1

@FrancosLab टिप के लिए धन्यवाद! मैं glamor/reset के पार चला गया लेकिन यह नहीं देखा कि सामान्यीकरण इसका हिस्सा था- मुझे नहीं लगता कि ग्लैमर के रीडमे पर इसका उल्लेख किया गया था। पीआर के लिए धन्यवाद!

drwpow 13 दिस॰ 2016

👍1

तो [email protected] के लिए अभी ऐसा करने का सबसे अच्छा तरीका क्या है? मैंने बिना किसी किस्मत के with-global-stylesheet उदाहरण के साथ जो किया गया था उसका अनुकरण करने का प्रयास करने में कई घंटे बिताए हैं।

क्योंकि normalize.css एक पैकेज है, केवल फ़ाइल की प्रतिलिपि बनाना पर्याप्त नहीं है (नोड के रिज़ॉल्युशन की आवश्यकता package.main का उपयोग करती है)। इसके अलावा, emit-file-loader (और file-loader भी) उदाहरण रेपो से अलग व्यवहार कर रहा है। ऐसा लगता है कि लोडर को विकल्प name=dist/[path][name].[ext] पास करते समय, path हमेशा - से शुरू होता है, जिसके परिणामस्वरूप फ़ाइल .next/dist/-/node_modules/normalize.css/normalize.css में होती है, जो एक समस्या है .

इसे दूर करने का तरीका मूल रूप से संपूर्ण normalize.css फ़ाइल को static फ़ोल्डर में कॉपी करना है या शायद पूरी चीज़ को style टैग में इनलाइन करना है (मैं स्टाइल घटकों का उपयोग कर रहा हूं स्टाइल के लिए, हालांकि)।

मैंने webpack-copy-plugin का उपयोग करने की कोशिश की लेकिन ऐसा लगता है कि static फ़ोल्डर .next से नहीं परोसा जाता है, लेकिन वास्तव में रूट फ़ोल्डर से ही <root-folder>/static (जहां pages रहता है) तो यह भी काम नहीं किया।

अब जबकि Next.js ग्लैमर पर निर्भर नहीं है, इसके साथ आगे बढ़ने के लिए कोई सुझाव?

संपादित करें: संबंधित: https://github.com/zeit/styled-jsx/issues/83 , https://github.com/zeit/styled-jsx/pull/100 , https://github.com/zeit/ अगला.जेएस/मुद्दे/544

migueloller 23 फ़र॰ 2017

with-global-stylesheet उदाहरण अभी यहां अपडेट किया गया है: #1327!

migueloller 2 मार्च 2017

1327 अभी भी `import 'normalize.css'` जैसी सरल चीज़ के लिए काम नहीं करता है। मुख्य मुद्दा यह प्रतीत होता है कि क्योंकि वेबपैक सर्वर पर नहीं चलता है, आप सर्वर में चलने वाली किसी भी फाइल पर गैर-जेएस फाइलों को आयात नहीं कर सकते हैं।

migueloller 2 मार्च 2017

@migueller शायद v2.0 के बाद यूनिवर्सल वेबपैक पर स्विच कर सकता है...: https://github.com/zeit/next.js/issues/1245

sedubois 2 मार्च 2017

😄1

@sedubois , इसका बेसब्री से इंतजार है! मैं

migueloller 2 मार्च 2017

आप वहां अपना वोट जोड़ सकते हैं

sedubois 2 मार्च 2017

👍2

दोस्तों, मैं normalize के माध्यम से ठीक आयात कर रहा हूं sass-loader , यहां तक कि includePaths के बिना भी जो अभी विलय हुआ है। आपको बस इतना करना है कि normalize-scss ( normalize.css का Sass पोर्ट) इंस्टॉल करें और अपने उच्चतम स्तर पर <strong i="10">@import</strong> '~normalize-scss'; जोड़ें (कस्टम _document , लेआउट, या पेज) जहां आप एक scss स्टाइलशीट शामिल होगी जिस तरह से with-global-stylesheet करता है।

अब यदि आप मूल आयात करते हैं, तो मैं शर्त लगाता हूं कि आप babel-plugin-module-resolver का उपयोग करके एक उपनाम को node_modules babel-plugin-module-resolver पर सेट कर सकते हैं जिस तरह से मैंने उदाहरण में styles के साथ किया था और फिर इसे जेएस के साथ आयात करें + <style dangerouslySetInnerHTML={{ __html: normalize }} /> ।

orlin 2 मार्च 2017

@orlin , आप इसे केवल जेएस के साथ आयात नहीं कर सकते क्योंकि यह सर्वर में एक त्रुटि फेंक देगा क्योंकि यह वेबपैक से नहीं जाता है।

migueloller 2 मार्च 2017

@migueloller , इसे ठीक काम करना चाहिए, उसी तरह scss को with-global-stylesteet उदाहरण में js से आयात किया जाता है। css और scss दोनों को वेबपैक लोडर द्वारा next.config.js में नियंत्रित किया जाता है और जेएस में बदल दिया जाता है। मैंने अभी import normalize from '...' प्रदान नहीं किया क्योंकि मुझे normalize.css स्थापित करने और babel-plugin-module-resolver उपनाम सेट करने की आवश्यकता होगी ताकि आपको एक ... पथ दिया जा सके जो काम करता है।

orlin 2 मार्च 2017

@ऑर्लिन ,

मैंने उदाहरण क्लोन किया है, normalize.css जोड़ा है, और इसके साथ थोड़ा सा खेला है। आप सही हैं, इसे काम करना संभव है!

हालांकि मुझे इसके लिए एक कस्टम कॉन्फ़िगरेशन बनाना पड़ा, जहां उत्सर्जित फ़ाइल का आउटपुट नाम dist/[path]index.js था, इस तथ्य के कारण कि यदि आप package.json की प्रतिलिपि नहीं बनाते हैं तो नोड का require नहीं मिलेगा। क्योंकि आप अन्य शैलियों के लिए यह व्यवहार नहीं चाहते हैं (आपके स्रोत कोड में रहना और node_modules नहीं) तो आपको केवल normalize.css (साथ ही आपके द्वारा उपयोग किए जा रहे अन्य पैकेज) के लिए एक वेबपैक नियम सेट करना होगा।

यह एक अल्पकालिक फिक्स के रूप में काम करता है लेकिन यह निश्चित रूप से अच्छा होगा कि कुछ ऐसा हो जो बॉक्स से बाहर हो जैसा कि # 1245 और https://github.com/zeit/styled-jsx/pull/100#issuecomment में चर्चा की जा रही है। -277133969

@rauchg , क्या आपको लगता है कि node_modules में मौजूद पैकेजों के लिए उदाहरण बनाना एक अच्छा विचार होगा? मुझे एक नया उदाहरण बनाने या with-global-stylesheet एक का विस्तार करने में कोई आपत्ति नहीं होगी।

migueloller 2 मार्च 2017

@migueller इसे उसी उदाहरण में जोड़ना शायद बेहतर होगा

rauchg 2 मार्च 2017

@migueller मुझे ऐसा करने के लिए एक सुपर-क्लीन "सर्वोत्तम अभ्यास" तरीका मिला। with-global-stylesheet पर एक पीआर करेंगे ... मुझे आशा है कि आपने इसे हैक करने में बहुत अधिक समय नहीं लगाया।

orlin 3 मार्च 2017

👍3

रीसेट या सामान्य सहित वैश्विक शैलियाँ, वैसे भी एक विरोधी पैटर्न हैं। घटकों को अपनी शैलियों को नियंत्रित करना चाहिए। सामान्यीकृत सीएसएस का jQuery है।

jaydenseric 9 मार्च 2017

👎146 😕41 😄13 🎉3 👀2

btnwtn 9 अप्रैल 2017

👍66 🎉2 👎1

मेरे द्वारा उपयोग किया जाने वाला दृष्टिकोण यहां दिया गया है: (https://github.com/zeit/next.js/#custom-document)

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const { html, head, errorHtml, chunks } = renderPage()
    const styles = flush()
    return { html, head, errorHtml, chunks, styles }
  }

  render() {
    return (
      <html>
        <Head>
          <title>My page</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
        </Head>
        <body className="custom_class">
          {this.props.customValue}
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

vinzcelavi 1 मार्च 2018

👍7 👎3

@vinzcelavi आप शैलियों को क्यों फ्लश करते हैं?

sospedra 12 नव॰ 2018

@sospedra मुझे नहीं पता शायद यह मदद कर सकता है: https://github.com/zeit/styled-jsx#styled -jsxserver

vinzcelavi 13 नव॰ 2018

😄2

आप शायद ऐसा नहीं करना चाहते हैं, बल्कि अपडेट किए गए दस्तावेज़ के अनुसार Document.getInitialProps पर कॉल करें: https://github.com/zeit/next.js/#custom -document

timneutkens 13 नव॰ 2018

👍1

Head के अंदर सीडीएन यूआरएल के साथ link टैग रखना ठीक क्यों नहीं है? इसने मेरे लिए काम किया।

janoist1 4 दिस॰ 2018

@ janoist1 मुझे लगता है कि यहां समस्या यह है कि हम आगे से खुद को सामान्य बनाना चाहते हैं, बल्कि बाहरी सीडीएन पर निर्भर रहना चाहते हैं। यह विकास में ठीक है, लेकिन मैं उत्पादन में किसी बाहरी चीज पर भरोसा नहीं करना चाहता।

IAmNatch 8 मार्च 2019

इसे हल करने के दो तरीके यहां दिए गए हैं यदि next-css का उपयोग करना आपके लिए कोई विकल्प नहीं है (शायद आप CSS मॉड्यूल का उपयोग कर रहे हैं, इसलिए _app से CSS फ़ाइल आयात करना विश्व स्तर पर लागू नहीं होगा)।

हम पहले link के अंदर Head के लिए normalize.css शामिल करते हैं और फिर <style type='text/css'>{globalStyles}</style> के माध्यम से कुछ कस्टम वैश्विक शैलियों को लागू करते हैं

import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'

const globalStyles = `
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
`

export default class MyDocument extends Document {
  render () {
    return (
      <html>
        <Head>
          <meta name='viewport' content='width=device-width, initial-scale=1' />
          <meta charSet='utf-8' />

          <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css' />

          <style type='text/css'>{globalStyles}</style>
        </Head>

        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

transitive-bullshit 10 मार्च 2019

👍4

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

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

Next.js: normalize.css का उपयोग करने का पसंदीदा तरीका?

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

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

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