Next.js: الطريقة المفضلة لاستخدام normalize.css؟

تم إنشاؤها على ٨ ديسمبر ٢٠١٦ · 27تعليقات · مصدر: vercel/next.js

ما هي الطريقة المثالية لتحميل normalize.css (من الناحية المثالية من NPM) بطريقة فعالة؟ أود تجنب تحميله كأصل ثابت وتقديم طلب رأس لمجرد جزء صغير من CSS.

يحتوي Glamour على glamor/reset إضافي ، لكنه أبسط بكثير من التطبيع ، وليس ما أبحث عنه (لست متأكدًا حقًا من كيفية تحميل الإضافات إلى Glamour من التالي على أي حال).

مصدر

drwpow

👍2

التعليق الأكثر فائدة

jaydenseric أنت محق في أن Normalize.css هو jQuery لـ CSS. لا تزال المتصفحات غير متناسقة إلى حد كبير في التصميم الافتراضي لعناصر HTML ، يساعد Normalize.css في التعامل مع هذه المشكلة. يعد Normalize.css ضرورة لدعم المستعرض القديم للمشاريع الحديثة.

btnwtn في ٩ أبريل ٢٠١٧

👍66 🎉2 👎1

ال 27 كومينتر

يمكنك استخدام next/head .

nkzawa في ٩ ديسمبر ٢٠١٦

👎19

nkzawa لقد استخدمت next/head لتحميل بعض المقاطع العالمية ، ولكن بدون css-loader في المشروع ، كيف يمكنني طلب ملف CSS من node_modules ؟ وهل هذا قابل للتخزين المؤقت على نهاية المستخدم أم أن هذا ينفخ حمولة كل طلب رأس؟

drwpow في ٩ ديسمبر ٢٠١٦

تريد تعريف style كنص في next/head مثل:

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

يجب عليك تحويل normalize.css إلى .json أو تحويل مكون إلى require ، لكن هذه ستكون أفضل طريقة في الوقت الحالي IMO. إذا طلبت الملف في جميع الصفحات ، فسيتم تجميعه كقطعة كبيرة ويتم تحميله مرة واحدة فقط حتى لا يؤدي إلى زيادة حجم الحمولة.

ستكون قادرًا على استخدام css-loader أيضًا عند إصدار https://github.com/zeit/next.js/pull/222 .

nkzawa في ٩ ديسمبر ٢٠١٦

شكرا. هذا ما اكتشفته ، لكن لم أكن أعرف ما إذا كانت هناك طريقة أكثر تلقائية لتحميله حاليًا. أعتقد أنه يمكنني تشغيل Webpack أو Gulp محليًا للتحويل قبل النقر عليه في المرة التالية.

ومن الجيد معرفة أن التالي يستخدم التقسيم المشترك. أشعر بتحسن تجاه دفع الأشياء إلى الرأس الآن. شكرا لالإجابة على أسئلتي!

في 9 ديسمبر 2016 ، الساعة 01:11 ، كتب Naoyuki Kanezawa [email protected] :
ترغب في تعريف النمط كنص في التالي / العنوان مثل:

يجب عليك تحويل normalize.css إلى .json أو أحد المكونات التي تريدها ، ولكن هذه ستكون أفضل طريقة في الوقت الحالي IMO. إذا طلبت الملف في جميع الصفحات ، فسيتم تجميعه كقطعة كبيرة ويتم تحميله مرة واحدة فقط حتى لا يؤدي إلى زيادة حجم الحمولة.
ستكون قادرًا على استخدام أداة تحميل css أيضًا عند إصدار # 222.
-
أنت تتلقى هذا لأنك قمت بتأليف الموضوع.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

drwpow في ٩ ديسمبر ٢٠١٦

أود أن أشير إلى أن السحر يستخدم بالفعل normalize.css وإن كان إصدارًا قديمًا v3.0.2
https://github.com/threepointone/glamor/blob/master/src/reset.js

قدم طلب سحب
https://github.com/threepointone/glamor/pull/154

ببساطة استيراد import 'glamor/reset' يعمل بشكل جيد.

لا تتردد في استخدام شوكة بلدي إذا كنت بحاجة إلى 5.0 أو انتظر حتى يتم دمج طلب السحب :)

FrancosLab في ١٣ ديسمبر ٢٠١٦

👍7 🎉1

FrancosLab شكرا للنصيحة! ركضت عبر glamor/reset لكن لم ألاحظ أن التطبيع كان جزءًا منه - لا أعتقد أنه مذكور في README الساحر. شكرا للعلاقات العامة!

drwpow في ١٣ ديسمبر ٢٠١٦

👍1

إذن ما هي أفضل طريقة للقيام بذلك الآن مقابل [email protected] ؟ لقد قضيت ساعات عديدة في محاولة لمحاكاة ما تم باستخدام مثال with-global-stylesheet بدون حظ.

نظرًا لأن normalize.css عبارة عن حزمة ، فإن نسخ الملف ببساطة لا يكفي (تتطلب دقة Node استخدام 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 لا يعتمد على Glamour ، هل من نصائح للمضي قدمًا في هذا؟

migueloller في ٢٣ فبراير ٢٠١٧

تم تحديث المثال with-global-stylesheet هنا: # 1327!

migueloller في ٢ مارس ٢٠١٧

1327 لا يزال لا يعمل لشيء بسيط مثل `import 'normalize.css'` . يبدو أن المشكلة الرئيسية هي أنه نظرًا لعدم تشغيل Webpack على الخادم ، لا يمكنك استيراد ملفات بخلاف ملفات js على أي ملف يتم تشغيله في الخادم.

migueloller في ٢ مارس ٢٠١٧

migueloller ربما يمكنه التبديل إلى Webpack العالمي بعد الإصدار 2.0 ...: https://github.com/zeit/next.js/issues/1245

sedubois في ٢ مارس ٢٠١٧

😄1

سيدوبوا ، في انتظار ذلك بفارغ الصبر! 😄

migueloller في ٢ مارس ٢٠١٧

يمكنك إضافة تصويتك هناك 😉

sedubois في ٢ مارس ٢٠١٧

👍2

يا رفاق ، لقد كنت أستورد normalize على ما يرام من خلال sass-loader ، حتى بدون includePaths الذي تم دمجه للتو. كل ما عليك فعله هو تثبيت normalize-scss (منفذ Sass normalize.css ) وإضافة <strong i="10">@import</strong> '~normalize-scss'; في أعلى مستواك (تخصيص _document أو التخطيط أو الصفحة) حيث ستشمل ورقة أنماط scss بالطريقة التي يعمل بها with-global-stylesheet .

الآن إذا كنت تفضل استيراد الأصل ، أراهن أنه يمكنك إعداد اسم مستعار إلى node_modules باستخدام babel-plugin-module-resolver بالطريقة التي فعلتها للتو مع styles في المثال ثم استيراده باستخدام js + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .

orlin في ٢ مارس ٢٠١٧

orlin ، لا يمكنك ببساطة استيراده باستخدام JS لأنه سيؤدي إلى حدوث خطأ في الخادم لأنه لا يمر عبر Webpack.

migueloller في ٢ مارس ٢٠١٧

migueloller ، يجب أن يعمل بشكل جيد ، بنفس طريقة استيراد scss من js في المثال with-global-stylesteet . تتم معالجة كلا من css و scss بواسطة أدوات تحميل Webpack في next.config.js وتحويلها إلى js. لم أقم بتقديم import normalize from '...' لأنني سأحتاج إلى تثبيت normalize.css وإعداد اسم مستعار babel-plugin-module-resolver لمنحك مسار ... يعمل.

orlin في ٢ مارس ٢٠١٧

orlin ،

لقد قمت باستنساخ المثال وإضافة normalize.css ولعبت معه قليلاً. أنت على حق ، من الممكن أن تجعلها تعمل!

اضطررت إلى إجراء تكوين مخصص له على الرغم من ذلك ، حيث كان اسم الإخراج للملف المنبعث dist/[path]index.js نظرًا لحقيقة أنه إذا لم تقم بنسخ package.json فإن Node's require لن يجدها. نظرًا لأنك لا تريد هذا السلوك للأنماط الأخرى (العيش في التعليمات البرمجية المصدر الخاصة بك وليس node_modules ) ، فيجب عليك إعداد قاعدة Webpack فقط لـ normalize.css (بالإضافة إلى الحزم الأخرى التي قد تستخدمها).

يعمل هذا كحل قصير المدى ولكن سيكون من الجيد بالتأكيد أن يكون لديك شيء يعمل خارج الصندوق كما تمت مناقشته في # 1245 و https://github.com/zeit/styled-jsx/pull/100#issuecomment 277133969

rauchg ، هل تعتقد أنه سيكون فكرة جيدة أن تكون مثالاً للحزم الموجودة في node_modules ؟ لا أمانع في صنع مثال جديد أو تمديد with-global-stylesheet واحد.

migueloller في ٢ مارس ٢٠١٧

ربما يكون من الأفضل إضافة migueloller إلى نفس المثال

rauchg في ٢ مارس ٢٠١٧

migueloller لقد وجدت طريقة "أفضل الممارسات" فائقة النظافة للقيام بذلك. ستقوم بإجراء العلاقات العامة على with-global-stylesheet ... أتمنى ألا تقضي الكثير من الوقت في اختراقها.

orlin في ٣ مارس ٢٠١٧

👍3

الأنماط العامة ، بما في ذلك عمليات إعادة التعيين أو التسوية ، هي نمط مضاد على أي حال. يجب أن تتحكم المكونات في أنماطها الخاصة. التطبيع هو jQuery من CSS.

jaydenseric في ٩ مارس ٢٠١٧

👎146 😕41 😄13 🎉3 👀2

btnwtn في ٩ أبريل ٢٠١٧

👍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 في ١ مارس ٢٠١٨

👍7 👎3

vinzcelavi لماذا تغسل الأنماط؟

sospedra في ١٢ نوفمبر ٢٠١٨

sospedra ليس لدي أي فكرة 😬 ربما يمكن أن يساعد: https://github.com/zeit/styled-jsx#styled -jsxserver

vinzcelavi في ١٣ نوفمبر ٢٠١٨

😄2

ربما لا ترغب في القيام بذلك ولكن بدلاً من ذلك اتصل بـ Document.getInitialProps وفقًا للوثائق المحدّثة: https://github.com/zeit/next.js/#custom -document

timneutkens في ١٣ نوفمبر ٢٠١٨

👍1

لماذا لا يكون وضع علامة link مع عنوان URL لشبكة CDN داخل Head أمرًا جيدًا؟ عملت معي.

janoist1 في ٤ ديسمبر ٢٠١٨

@ janoist1 أعتقد أن المشكلة هنا هي أننا نرغب في خدمة تطبيع أنفسنا من التالي ، بدلاً من الاعتماد على CDN خارجي. إنه جيد في التطوير ، لكنني لا أريد الاعتماد على أي شيء خارجي في الإنتاج.

IAmNatch في ٨ مارس ٢٠١٩

فيما يلي طريقتان لحل هذه المشكلة إذا لم يكن استخدام next-css خيارًا متاحًا لك (ربما تستخدم وحدات CSS النمطية لذلك لن يتم تطبيق استيراد ملف CSS من _app عالميًا).

نقوم أولاً بتضمين 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>
    )
  }
}