Next.js: Metode yang disukai menggunakan normalize.css?

Dibuat pada 8 Des 2016 · 27Komentar · Sumber: vercel/next.js

Apa cara ideal untuk memuat normalize.css (idealnya dari NPM) dengan cara yang berkinerja baik? Saya ingin menghindari memuatnya sebagai aset statis dan memperkenalkan permintaan header hanya untuk sedikit CSS.

Glamour memiliki tambahan glamor/reset , tetapi jauh lebih sederhana daripada menormalkan, dan bukan yang saya cari (saya tidak begitu yakin bagaimana cara memuat ekstra ke Glamour dari selanjutnya).

Sumber

drwpow

👍2

Komentar yang paling membantu

@jaydenseric Anda benar bahwa Normalize.css adalah jQuery dari CSS. Peramban masih cukup tidak konsisten dalam gaya default elemen HTML, Normalize.css membantu mengatasi masalah itu. Normalize.css adalah kebutuhan untuk dukungan browser lama untuk proyek modern.

btnwtn pada 9 Apr 2017

👍66 🎉2 👎1

Semua 27 komentar

Anda dapat menggunakan next/head .

nkzawa pada 9 Des 2016

👎19

@nkzawa Saya telah menggunakan next/head untuk memuat beberapa gaya global, tetapi tanpa css-loader pada proyek, bagaimana saya bisa memerlukan file CSS dari node_modules ? Dan apakah ini dapat di-cache di ujung pengguna atau apakah ini menggembungkan muatan setiap permintaan tajuk?

drwpow pada 9 Des 2016

Anda ingin mendefinisikan style sebagai teks dalam next/head seperti:

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

Anda harus mengonversi normalize.css menjadi .json atau komponen menjadi require , tetapi ini akan menjadi cara terbaik untuk saat ini IMO. Jika Anda memerlukan file di semua halaman, maka file tersebut dibundel sebagai potongan dan dimuat hanya sekali sehingga tidak akan mengasapi muatan.

Anda juga dapat menggunakan css-loader ketika https://github.com/zeit/next.js/pull/222 dirilis.

nkzawa pada 9 Des 2016

Terima kasih. Inilah yang saya pikirkan, tetapi tidak tahu apakah ada cara yang lebih otomatis untuk memuatnya saat ini. Saya kira saya bisa menjalankan Webpack atau Gulp secara lokal untuk mengonversi sebelum berikutnya mencapainya.

Dan itu bagus untuk mengetahui bahwa selanjutnya menggunakan chunking umum. Saya merasa lebih baik tentang mendorong barang-barang ke Kepala sekarang. Terima kasih telah menjawab pertanyaanku!

Pada 9 Desember 2016, pukul 01:11, Naoyuki [email protected] menulis:
Anda ingin mendefinisikan gaya sebagai teks di next/head seperti:

Anda harus mengonversi normalize.css ke .json atau komponen yang diperlukan, tetapi ini akan menjadi cara terbaik untuk saat ini IMO. Jika Anda memerlukan file di semua halaman, maka file tersebut dibundel sebagai potongan dan dimuat hanya sekali sehingga tidak akan mengasapi muatan.
Anda juga dapat menggunakan css-loader ketika #222 dirilis.
—
Anda menerima ini karena Anda yang menulis utas.
Balas email ini secara langsung, lihat di GitHub, atau matikan utasnya.

drwpow pada 9 Des 2016

Ingin menunjukkan bahwa glamor sebenarnya menggunakan normalize.css meskipun versi lama v3.0.2
https://github.com/threepointone/glamor/blob/master/src/reset.js

Membuat permintaan tarik
https://github.com/threepointone/glamor/pull/154

Cukup mengimpor import 'glamor/reset' berfungsi dengan baik.

Jangan ragu untuk menggunakan garpu saya jika Anda membutuhkan 5.0 atau menunggu permintaan tarik untuk digabungkan :)

FrancosLab pada 13 Des 2016

👍7 🎉1

@FrancosLab Terima kasih atas tipnya! Saya menemukan glamor/reset tetapi tidak menyadari bahwa normalisasi adalah bagian darinya—saya rasa itu tidak disebutkan di README glamor. Terima kasih untuk PR-nya!

drwpow pada 13 Des 2016

👍1

Jadi apa cara terbaik untuk melakukan ini sekarang untuk [email protected] ? Saya telah menghabiskan berjam-jam mencoba meniru apa yang dilakukan dengan contoh with-global-stylesheet tanpa hasil.

Karena normalize.css adalah sebuah paket, menyalin file saja tidak cukup (Resolusi kebutuhan Node menggunakan package.main ). Selain itu, emit-file-loader (dan file-loader juga) tampaknya berperilaku berbeda dari contoh repo. Tampaknya ketika meneruskan opsi name=dist/[path][name].[ext] ke loader, path selalu dimulai dengan - , mengakibatkan file berada di .next/dist/-/node_modules/normalize.css/normalize.css , yang merupakan masalah .

Cara untuk menyiasatinya adalah dengan menyalin seluruh file normalize.css ke dalam folder static atau mungkin memasukkan semuanya ke dalam tag style (Saya menggunakan komponen gaya untuk gaya, meskipun).

Saya mencoba menggunakan webpack-copy-plugin tetapi sepertinya folder static tidak dilayani dari .next tetapi sebenarnya dari folder root itu sendiri <root-folder>/static (di mana pages hidup) jadi itu juga tidak berhasil.

Sekarang Next.js tidak bergantung pada Glamour, adakah tips untuk maju dengan ini?

EDIT: Terkait: https://github.com/zeit/styled-jsx/issues/83 , https://github.com/zeit/styled-jsx/pull/100 , https://github.com/zeit/ next.js/issues/544

migueloller pada 23 Feb 2017

Contoh with-global-stylesheet baru saja diperbarui di sini: #1327!

migueloller pada 2 Mar 2017

1327 masih tidak berfungsi untuk sesuatu yang sederhana seperti `import 'normalize.css'` . Masalah utamanya tampaknya karena Webpack tidak berjalan di server, Anda tidak dapat mengimpor file non-js pada file apa pun yang berjalan di server.

migueloller pada 2 Mar 2017

@migueloller mungkin bisa beralih ke Webpack universal setelah v2.0...: https://github.com/zeit/next.js/issues/1245

sedubois pada 2 Mar 2017

😄1

@sedubois , tidak sabar menunggu itu! 😄.

migueloller pada 2 Mar 2017

Anda dapat menambahkan suara Anda di sana

sedubois pada 2 Mar 2017

👍2

Teman-teman, saya telah mengimpor normalize dengan baik melalui sass-loader , bahkan tanpa includePaths yang baru saja digabungkan. Yang harus Anda lakukan adalah menginstal normalize-scss (port Sass dari normalize.css ) dan menambahkan <strong i="10">@import</strong> '~normalize-scss'; pada level tertinggi Anda (kustom _document , tata letak, atau halaman) tempat Anda akan menyertakan lembar gaya scss seperti yang dilakukan with-global-stylesheet .

Sekarang jika Anda lebih suka mengimpor yang asli, saya yakin Anda dapat mengatur alias ke node_modules menggunakan babel-plugin-module-resolver seperti yang baru saja saya lakukan dengan styles dalam contoh dan kemudian mengimpornya dengan js + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .

orlin pada 2 Mar 2017

@orlin , Anda tidak bisa begitu saja mengimpornya dengan JS karena akan menimbulkan kesalahan di server karena tidak melalui Webpack.

migueloller pada 2 Mar 2017

@migueloller , itu akan berfungsi dengan baik, dengan cara yang sama scss diimpor dari js dalam contoh with-global-stylesteet . Baik css dan scss ditangani oleh pemuat Webpack di next.config.js dan dikonversi ke js. Saya hanya tidak memberikan import normalize from '...' karena saya perlu menginstal normalize.css dan menyiapkan babel-plugin-module-resolver alias untuk memberi Anda jalur ... yang berfungsi.

orlin pada 2 Mar 2017

@orlin ,

Saya telah mengkloning contoh, menambahkan normalize.css , dan memainkannya sedikit. Anda benar, itu mungkin untuk membuatnya bekerja!

Saya harus membuat konfigurasi khusus untuk itu, di mana nama output dari file yang dipancarkan adalah dist/[path]index.js karena fakta bahwa jika Anda tidak menyalin package.json maka Node's require tidak akan menemukannya. Karena Anda tidak ingin perilaku ini untuk gaya lain (berada di kode sumber Anda dan bukan node_modules ) maka Anda harus menyiapkan aturan Webpack hanya untuk normalize.css (ditambah paket lain yang mungkin Anda gunakan).

Ini berfungsi sebagai perbaikan jangka pendek tetapi pasti akan menyenangkan untuk memiliki sesuatu yang berfungsi di luar kotak seperti yang sedang dibahas di #1245 dan https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969

@rauchg , menurut Anda apakah ide yang baik untuk membuat contoh untuk paket yang ada di node_modules ? Saya tidak keberatan membuat contoh baru atau memperluas with-global-stylesheet .

migueloller pada 2 Mar 2017

@migueloller menambahkannya ke contoh yang sama mungkin akan lebih disukai

rauchg pada 2 Mar 2017

@migueloller Saya menemukan cara "praktik terbaik" super bersih untuk melakukan ini. Akan melakukan PR pada with-global-stylesheet ... Saya harap Anda tidak menghabiskan terlalu banyak waktu untuk meretasnya.

orlin pada 3 Mar 2017

👍3

Gaya global, termasuk mengatur ulang atau menormalkan, bagaimanapun juga merupakan anti-pola. Komponen harus mengontrol gaya mereka sendiri. Normalisasi adalah jQuery dari CSS.

jaydenseric pada 9 Mar 2017

👎146 😕41 😄13 🎉3 👀2

btnwtn pada 9 Apr 2017

👍66 🎉2 👎1

Inilah pendekatan yang saya gunakan: (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 pada 1 Mar 2018

👍7 👎3

@vinzcelavi Mengapa Anda menyiram gaya?

sospedra pada 12 Nov 2018

@sospedra Saya tidak tahu Mungkin itu bisa membantu: https://github.com/zeit/styled-jsx#styled -jsxserver

vinzcelavi pada 13 Nov 2018

😄2

Anda mungkin tidak ingin melakukan itu tetapi sebaliknya memanggil Document.getInitialProps sesuai dengan dokumentasi yang diperbarui: https://github.com/zeit/next.js/#custom -document

timneutkens pada 13 Nov 2018

👍1

Mengapa tidak baik menempatkan tag link dengan url CDN di dalam Head ? Itu berhasil untuk saya.

janoist1 pada 4 Des 2018

@janoist1 Saya pikir masalahnya di sini adalah bahwa kami ingin menormalkan diri kami dari berikutnya, daripada mengandalkan CDN eksternal. Tidak apa-apa dalam pengembangan, tetapi saya tidak ingin bergantung pada apa pun di luar produksi.

IAmNatch pada 8 Mar 2019

Berikut adalah dua cara untuk menyelesaikannya jika menggunakan next-css bukan pilihan untuk Anda (mungkin Anda menggunakan modul CSS sehingga mengimpor file CSS dari _app tidak akan berlaku secara global).

Pertama-tama kita menyertakan link di dalam Head untuk normalize.css dan kemudian menerapkan beberapa gaya global khusus melalui <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>
    )
  }
}