Next.js: Предпочтительный метод использования normalize.css?

Созданный на 8 дек. 2016 · 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 9 апр. 2017

👍66 🎉2 👎1

Все 27 Комментарий

Вы можете использовать next/head .

nkzawa 9 дек. 2016

👎19

@nkzawa Я использовал next/head для загрузки некоторых глобальных систем, но без css-loader в проекте, как я мог потребовать файл CSS от node_modules ? И это кешируется на стороне пользователя, или это раздувает полезную нагрузку при каждом запросе заголовка?

drwpow 9 дек. 2016

Вы хотите определить 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 9 дек. 2016

Спасибо. Это то, что я понял, но не знал, есть ли в настоящее время более автоматический способ загрузки. Я думаю, я мог бы запустить Webpack или Gulp локально, чтобы конвертировать, прежде чем он попадет в следующий раз.

И приятно знать, что next использует обычное разбиение на фрагменты. Теперь я чувствую себя лучше, когда пихаю вещи в голову. Спасибо за ответы на мои вопросы!

9 декабря 2016 г., в 01:11, Наоюки Канезава ( [email protected] ) написал:
Вы хотите определить стиль как текст в следующем/заголовке, например:

Вам нужно будет преобразовать normalize.css в .json или требуемый компонент, но на данный момент это будет лучший способ, IMO. Если вам требуется файл на всех страницах, то он объединяется в виде фрагмента и загружается только один раз, чтобы не раздувать полезную нагрузку.
Вы также сможете использовать css-loader, когда будет выпущен # 222.
—
Вы получаете это, потому что вы создали тему.
Ответьте на это письмо напрямую, просмотрите его на GitHub или отключите ветку.

drwpow 9 дек. 2016

Хотел бы отметить, что гламур на самом деле использует normalize.css , хотя и устаревшую версию v3.0.2.
https://github.com/threepointone/glamor/blob/master/src/reset.js

Сделал пулреквест
https://github.com/threepointone/гламур/тянуть/154

Простой импорт import 'glamor/reset' работает нормально.

Не стесняйтесь использовать мой форк, если вам нужна версия 5.0, или дождитесь слияния запроса на включение :)

FrancosLab 13 дек. 2016

👍7 🎉1

@FrancosLab Спасибо за совет! Я наткнулся на glamor/reset , но не заметил, что нормализация была частью этого — я не думаю, что это упоминалось в README гламура. Спасибо за пиар!

drwpow 13 дек. 2016

👍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, какие-нибудь советы по дальнейшему развитию?

РЕДАКТИРОВАТЬ: Связано: https://github.com/zeit/styled-jsx/issues/83 , https://github.com/zeit/styled-jsx/pull/100 , https://github.com/zeit/ следующий.js/вопросы/544

migueloller 23 февр. 2017

Пример with-global-stylesheet только что был обновлен здесь: #1327!

migueloller 2 мар. 2017

1327 по-прежнему не работает для чего-то такого простого, как `import 'normalize.css'` . Основная проблема заключается в том, что, поскольку Webpack не запускается на сервере, вы не можете импортировать файлы, отличные от js, в любой файл, который запускается на сервере.

migueloller 2 мар. 2017

@migueloller , возможно, сможет переключиться на универсальный Webpack после версии 2.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 (порт Sass normalize.css ) и добавить <strong i="10">@import</strong> '~normalize-scss'; на ваш самый высокий уровень (пользовательский _document , макет или страницу), где вы будет включать таблицу стилей $# scss with-global-stylesheet , как это делает with-global-stylesheet.

Теперь, если вы предпочитаете импортировать оригинал, держу пари, вы можете настроить псевдоним на node_modules , используя babel-plugin-module-resolver , как я только что сделал с styles в примере, а затем импортировать его с помощью js. + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .

orlin 2 мар. 2017

@orlin , вы не можете просто импортировать его с помощью JS, потому что он выдаст ошибку на сервере, поскольку он не проходит через Webpack.

migueloller 2 мар. 2017

@migueloller , это должно работать нормально, точно так же, как scss импортируется из js в примере с with-global-stylesteet . И css , и scss обрабатываются загрузчиками Webpack в next.config.js и преобразуются в js. Я просто не предоставил import normalize from '...' , так как мне нужно было бы установить normalize.css и настроить псевдоним babel-plugin-module-resolver , чтобы дать вам работающий путь ... .

orlin 2 мар. 2017

@орлин ,

Я клонировал пример, добавил normalize.css и немного поиграл с ним. Вы правы, это возможно заставить это работать!

Однако мне пришлось сделать для него пользовательскую конфигурацию, где выходное имя созданного файла было dist/[path]index.js из-за того, что если вы не скопируете package.json , то Node require не найдет. Поскольку вам не нужно такое поведение для других стилей (живущих в вашем исходном коде, а не node_modules ), вам необходимо настроить правило Webpack только для normalize.css (плюс другие пакеты, которые вы можете использовать).

Это работает как краткосрочное исправление, но определенно было бы неплохо иметь что-то, что работает «из коробки», как обсуждается в #1245 и https://github.com/zeit/styled-jsx/pull/100#issuecomment . -277133969

@rauchg , как вы думаете, было бы неплохо сделать пример для пакетов, которые существуют в node_modules ? Я был бы не против сделать новый пример или расширить with-global-stylesheet .

migueloller 2 мар. 2017

@migueloller добавление его к тому же примеру, вероятно, было бы предпочтительнее

rauchg 2 мар. 2017

@migueloller Я нашел супер-чистый способ сделать это из лучших практик. Сделаю пиар на with-global-stylesheet ... Надеюсь, вы не потратили слишком много времени на его взлом.

orlin 3 мар. 2017

👍3

Глобальные стили, включая сброс или нормализацию, в любом случае являются антипаттерном. Компоненты должны управлять своими собственными стилями. Normalize — это jQuery в CSS.

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

Почему нельзя поместить тег link с URL-адресом CDN внутри тега Head ? Это сработало для меня.

janoist1 4 дек. 2018

@janoist1 Я думаю, проблема здесь в том, что мы хотели бы нормализовать себя из следующего, а не полагаться на внешний CDN. Это хорошо в разработке, но я не хочу полагаться на что-то внешнее в производстве.

IAmNatch 8 мар. 2019

Вот два способа решить эту проблему, если использование 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>
    )
  }
}