Next.js: normalize.css를 사용할 때 선호하는 방법은 무엇입니까?

에 만든 2016년 12월 08일 · 27코멘트 · 출처: vercel/next.js

normalize.css(이상적으로는 NPM에서)를 성능적으로 로드하는 이상적인 방법은 무엇입니까? 정적 자산으로 로드하는 것을 피하고 약간의 CSS에 대한 헤더 요청을 도입하고 싶습니다.

Glamour에는 glamor/reset 추가 기능이 있지만 normalize보다 훨씬 간단하며 제가 원하는 것이 아닙니다(어쨌든 다음부터 Glamour에 추가 기능을 로드하는 방법을 잘 모르겠습니다).

출처

drwpow

👍2

가장 유용한 댓글

@jaydenseric Normalize.css가 CSS의 jQuery라는 것이 맞습니다. 브라우저는 여전히 HTML 요소의 기본 스타일에서 상당히 일관성이 없습니다. Normalize.css는 이 문제를 처리하는 데 도움이 됩니다. Normalize.css는 최신 프로젝트에 대한 레거시 브라우저 지원에 필요합니다.

btnwtn 에 2017년 04월 09일

👍66 🎉2 👎1

모든 27 댓글

next/head 를 사용할 수 있습니다.

nkzawa 에 2016년 12월 09일

👎19

@nkzawa next/head 를 사용하여 일부 글로벌 syles를 로드했지만 프로젝트에 css-loader 가 없으면 $#$2 node_modules #$에서 CSS 파일을 어떻게 요구할 수 있습니까? 그리고 이것은 사용자 측에서 캐시할 수 있습니까? 아니면 모든 헤더 요청에 페이로드를 부풀려 줍니까?

drwpow 에 2016년 12월 09일

다음과 같이 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 에 2016년 12월 09일

감사 해요. 이것이 내가 생각한 것이었지만 현재 더 자동으로 로드하는 방법이 있는지 몰랐습니다. Webpack 또는 Gulp를 로컬에서 실행하여 다음에 히트하기 전에 변환할 수 있을 것 같습니다.

그리고 next가 공통 청킹을 사용한다는 것을 아는 것이 좋습니다. 나는 지금 머리에 물건을 밀어 넣는 것에 대해 기분이 좋습니다. 내 질문에 답변해 주셔서 감사합니다!

2016년 12월 9일 01:11에 Naoyuki Kanezawa [email protected] 이 다음과 같이 썼습니다.
다음과 같이 다음/헤드의 텍스트로 스타일을 정의하고 싶습니다.

normalize.css를 .json 또는 필요한 구성 요소로 변환해야 하지만 이것이 현재 IMO에 가장 적합한 방법입니다. 모든 페이지에 파일이 필요한 경우 청크로 번들되고 페이로드가 부풀려지지 않도록 한 번만 로드됩니다.
#222가 출시되었을 때 css-loader도 사용할 수 있었습니다.
—
스레드를 작성했기 때문에 이 메시지를 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하세요.

drwpow 에 2016년 12월 09일

glamour는 v3.0.2의 오래된 버전이기는 하지만 실제로 normalize.css 를 사용한다는 점을 지적하고 싶습니다.
https://github.com/threepointone/glamor/blob/master/src/reset.js

풀 리퀘스트를 했다
https://github.com/threepointone/glamor/pull/154

import 'glamor/reset' 가져오기만 하면 잘 작동합니다.

5.0이 필요하거나 pull 요청이 병합될 때까지 기다리면 언제든지 내 포크를 사용하세요. :)

FrancosLab 에 2016년 12월 13일

👍7 🎉1

@FrancosLab 팁 감사합니다! glamor/reset 를 만났지만 normalize가 그 일부라는 것을 알지 못했습니다. Glamour의 README에 언급되지 않은 것 같습니다. 홍보 감사합니다!

drwpow 에 2016년 12월 13일

👍1

[email protected] 에 대해 지금 이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 나는 운이 없이 with-global-stylesheet 예제로 수행된 작업을 에뮬레이트하려고 여러 시간을 보냈습니다.

normalize.css 는 패키지이기 때문에 단순히 파일을 복사하는 것만으로는 충분하지 않습니다(Node의 require resolution은 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 에 2017년 02월 23일

with-global-stylesheet 예제가 여기에서 업데이트되었습니다: #1327!

migueloller 에 2017년 03월 02일

1327 은 `import 'normalize.css'` 와 같은 간단한 작업에서는 여전히 작동하지 않습니다. 주요 문제는 Webpack이 서버에서 실행되지 않기 때문에 서버에서 실행되는 모든 파일에서 non-js 파일을 가져올 수 없다는 것입니다.

migueloller 에 2017년 03월 02일

@migueller 는 v2.0 이후 범용 Webpack으로 전환할 수 있습니다...: https://github.com/zeit/next.js/issues/1245

sedubois 에 2017년 03월 02일

😄1

@sedubois , 간절히 기다리고 있습니다! 😄

migueloller 에 2017년 03월 02일

거기에 투표를 추가할 수 있습니다 😉

sedubois 에 2017년 03월 02일

👍2

여러분, 방금 병합된 includePaths 없이도 sass-loader normalize 를 잘 가져왔습니다. normalize-scss ( normalize.css 의 Sass 포트)를 설치하고 최상위 레벨(custom _document , 레이아웃 또는 페이지)에 <strong i="10">@import</strong> '~normalize-scss'; 를 추가하기만 하면 됩니다. with-global-stylesheet 방식으로 $ scss 스타일시트를 포함합니다.

이제 원본을 가져오는 대신 babel-plugin-module-resolver #$를 사용하여 별칭을 node_modules 로 설정할 수 있습니다. 예제에서 styles 를 사용한 다음 js로 가져올 수 있습니다. + <style dangerouslySetInnerHTML={{ __html: normalize }} /> .

orlin 에 2017년 03월 02일

@orlin , Webpack을 거치지 않기 때문에 서버에서 오류가 발생하기 때문에 JS로 간단히 가져올 수 없습니다.

migueloller 에 2017년 03월 02일

@migueller , with-global-stylesteet 예제의 js 에서 scss 를 가져오는 것과 같은 방식으로 제대로 작동해야 합니다. css 및 scss 모두 next.config.js 에서 Webpack 로더에 의해 처리되고 js로 변환됩니다. normalize.css 를 설치하고 babel-plugin-module-resolver 별칭을 설정하여 작동하는 ... 경로를 제공해야 하므로 import normalize from '...' 를 제공하지 않았습니다.

orlin 에 2017년 03월 02일

@orlin ,

예제를 복제하고 normalize.css 를 추가하고 조금 가지고 놀았습니다. 당신 말이 맞아, 그것이 작동하게 만드는 것이 가능하다!

그러나 package.json 를 복사하지 않으면 Node의 require 를 복사하지 않기 때문에 방출된 파일의 출력 이름이 dist/[path]index.js 인 사용자 지정 구성을 만들어야 했습니다. require 은(는) 찾지 않습니다. 다른 스타일( node_modules 이 아닌 소스 코드에 있는)에 대해 이 동작을 원하지 않기 때문에 normalize.css(및 사용 중인 다른 패키지 포함)에 대해서만 Webpack 규칙을 설정해야 합니다.

이것은 단기 수정으로 작동하지만 #1245 및 https://github.com/zeit/styled-jsx/pull/100#issuecomment 에서 논의되는 것처럼 즉시 작동하는 것을 갖는 것이 좋습니다. -277133969

@rauchg , node_modules 에 존재하는 패키지에 대한 예제를 만드는 것이 좋은 아이디어라고 생각하십니까? 나는 새로운 예를 만들거나 with-global-stylesheet 하나를 확장하는 것에 신경 쓰지 않을 것입니다.

migueloller 에 2017년 03월 02일

@migueller 를 동일한 예제에 추가하는 것이 아마도 바람직할 것입니다.

rauchg 에 2017년 03월 02일

@migueller 이 작업을 수행하는 매우 깨끗한 "모범 사례" 방법을 찾았습니다. with-global-stylesheet 에 대한 PR을 할 것입니다 ... 해킹에 너무 많은 시간을 소비하지 않았으면 합니다.

orlin 에 2017년 03월 03일

👍3

재설정 또는 정규화를 포함한 전역 스타일은 어쨌든 안티 패턴입니다. 구성 요소는 고유한 스타일을 제어해야 합니다. Normalize는 CSS의 jQuery입니다.

jaydenseric 에 2017년 03월 09일

👎146 😕41 😄13 🎉3 👀2

btnwtn 에 2017년 04월 09일

👍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 에 2018년 03월 01일

👍7 👎3

@vinzcelavi 왜 스타일을 플러시합니까?

sospedra 에 2018년 11월 12일

@sospedra 잘 모르겠습니다 😬 도움이 될 수 있습니다 : https://github.com/zeit/styled-jsx#styled -jsxserver

vinzcelavi 에 2018년 11월 13일

😄2

아마도 그렇게 하고 싶지 않을 것입니다. 대신 업데이트된 문서에 따라 Document.getInitialProps 를 호출하십시오: https://github.com/zeit/next.js/#custom -document

timneutkens 에 2018년 11월 13일

👍1

Head 내부에 CDN URL과 함께 link 태그를 배치하는 것이 왜 좋지 않습니까? 그것은 나를 위해 일했습니다.

janoist1 에 2018년 12월 04일

@janoist1 여기서 문제는 외부 CDN에 의존하기보다 다음부터 정규화 서비스를 제공하고 싶다는 것입니다. 개발 단계에서는 문제가 없지만 프로덕션 환경에서는 외부에 의존하고 싶지 않습니다.

IAmNatch 에 2019년 03월 08일

다음은 next-css 를 사용하는 것이 옵션이 아닌 경우 이 문제를 해결하는 두 가지 방법입니다.

먼저 normalize.css Head link 를 포함시킨 다음 <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 에 2019년 03월 10일

👍4

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Next.js: normalize.css를 사용할 때 선호하는 방법은 무엇입니까?

가장 유용한 댓글

모든 27 댓글

1327 은 import 'normalize.css' 와 같은 간단한 작업에서는 여전히 작동하지 않습니다. 주요 문제는 Webpack이 서버에서 실행되지 않기 때문에 서버에서 실행되는 모든 파일에서 non-js 파일을 가져올 수 없다는 것입니다.

관련 문제

1327 은 `import 'normalize.css'` 와 같은 간단한 작업에서는 여전히 작동하지 않습니다. 주요 문제는 Webpack이 서버에서 실행되지 않기 때문에 서버에서 실행되는 모든 파일에서 non-js 파일을 가져올 수 없다는 것입니다.