normalize.css（理想的にはNPMから）をパフォーマンスの高い方法でロードする理想的な方法は何ですか？ 静的アセットとしてロードすることを避け、CSSのほんの少しのためにヘッダーリクエストを導入したいと思います。
グラマーにはglamor/resetのエクストラがありますが、正規化するよりもはるかに単純で、私が探しているものではありません（とにかく、グラマーにエクストラをロードする方法がよくわかりません）。
drwpow
全てのコメント27件
next/headを使用できます。
nkzawa
2016年12月09日
@nkzawa next/headを使用してグローバルスタイルをロードしましたが、プロジェクトにcss-loaderがない場合、 node_modulesのCSSファイルを要求するにはどうすればよいですか？ そして、これはユーザー側でキャッシュ可能ですか、それともヘッダー要求ごとにペイロードを肥大化させますか？
drwpow
2016年12月09日
styleをnext/headのテキストとして次のように定義します。
<Head>
<style>{`
body {
margin: 0;
}
`}</style>
</Head>
normalize.cssを.jsonに変換するか、コンポーネントをrequireに変換する必要がありますが、これが今のIMOの最良の方法です。 すべてのページでファイルが必要な場合は、ファイルがチャンクとしてバンドルされ、1回だけ読み込まれるため、ペイロードが肥大化することはありません。
https://github.com/zeit/next.js/pull/222がリリースされたときは、 css-loaderも使用できるようになります。
nkzawa
2016年12月09日
ありがとう。 これは私が考えたものですが、現在それをロードするより自動化された方法があるかどうかはわかりませんでした。 WebpackまたはGulpをローカルで実行して、次にヒットする前に変換できると思います。
そして、nextが一般的なチャンクを利用していることを知っておくのは良いことです。 私は今、頭に物を押し込むことについて気分が良くなっています。 私の質問に答えてくれてありがとう！
2016年12月9日01:11、金沢直幸[email protected]は次のように書いています。
次のように次/頭のテキストとしてスタイルを定義したい：
normalize.cssを.jsonまたは必要なコンポーネントに変換する必要がありますが、これが今のIMOの最良の方法です。 すべてのページでファイルが必要な場合は、ファイルがチャンクとしてバンドルされ、1回だけ読み込まれるため、ペイロードが肥大化することはありません。＃222がリリースされたときは、css-loaderも使用できるようになります。
—
スレッドを作成したため、これを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。
drwpow
2016年12月09日
古いバージョン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が必要な場合、またはプルリクエストがマージされるのを待つ場合は、私のフォークを自由に使用してください:)
FrancosLab
2016年12月13日
@FrancosLabヒントをありがとう！ glamor/resetに出くわしましたが、正規化がその一部であることに気づきませんでした。グラマーのREADMEで言及されていたとは思いません。 PRありがとうございます！
drwpow
2016年12月13日
では、今すぐ[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がGlamourに依存していないので、これを進めるためのヒントはありますか？
編集：関連： 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
2017年02月23日
with-global-stylesheetの例がここで更新されました：＃1327！
migueloller
2017年03月02日
1327は、 import 'normalize.css'のような単純なものではまだ機能しません。 主な問題は、Webpackがサーバー上で実行されないため、サーバー内で実行されるファイルに非jsファイルをインポートできないことであると思われます。
migueloller
2017年03月02日
@miguelollerは、v2.0以降でユニバーサルWebpackに切り替えることができるかもしれません...： https ：//github.com/zeit/next.js/issues/1245
sedubois
2017年03月02日
@sedubois 、それを熱心に待っています！ 😄
migueloller
2017年03月02日
そこに投票を追加できます😉
sedubois
2017年03月02日
みんな、私はnormalizeをsass-loaderまでうまくインポートしてきましたが、マージされたばかりのincludePathsがなくてもです。 あなたがしなければならないのは、 normalize-scss （ normalize.cssのSassポート）をインストールし、最高レベル（カスタム_document 、レイアウト、またはページ）に<strong i="10">@import</strong> '~normalize-scss';を追加することです。 with-global-stylesheetと同じように、 scssスタイルシートが含まれます。
オリジナルをインポートする場合は、例のstylesで行ったように、 babel-plugin-module-resolver $を使用してnode_modulesのエイリアスを設定し、jsでインポートできると思います。 + <style dangerouslySetInnerHTML={{ __html: normalize }} /> 。
orlin
2017年03月02日
@orlin 、Webpackを経由しないため、サーバーでエラーがスローされるため、JSで単純にインポートすることはできません。
migueloller
2017年03月02日
@migueloller 、 scssがwith-global-stylesteetの例のjsからインポートされるのと同じように、正常に動作するはずです。 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をコピーしないと、ノードの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日
@miguelollerが同じ例に追加するのがおそらく望ましいでしょう
rauchg
2017年03月02日
@migueloller私はこれを行うための非常にクリーンな「ベストプラクティス」の方法を見つけました。 with-global-stylesheetでPRを行います...ハッキングにあまり時間をかけなかったといいのですが。
orlin
2017年03月03日
リセットや正規化を含むグローバルスタイルは、とにかくアンチパターンです。 コンポーネントは、独自のスタイルを制御する必要があります。 NormalizeはCSSのjQueryです。
jaydenseric
2017年03月09日
@jaydensericあなたは、Normalize.cssがCSSのjQueryであることは正しいです。 ブラウザは、HTML要素のデフォルトのスタイルにまだかなり一貫性がありません。Normalize.cssはその問題に対処するのに役立ちます。 Normalize.cssは、最新のプロジェクトでレガシーブラウザをサポートするために必要です。
btnwtn
2017年04月09日
これが私が使用するアプローチです：（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日
@vinzcelaviなぜスタイルをフラッシュするのですか？
sospedra
2018年11月12日
@sospedraわかりません😬多分それは役立つかもしれません： https ：//github.com/zeit/styled-jsx#styled -jsxserver
vinzcelavi
2018年11月13日
おそらくそれをしたくないでしょうが、代わりに更新されたドキュメントに従ってDocument.getInitialPropsを呼び出します： https ：//github.com/zeit/next.js/#custom -document
timneutkens
2018年11月13日
Head内にCDN URLを含むlinkタグを配置しても問題がないのはなぜですか？ それは私のために働いた。
janoist1
2018年12月04日
@ janoist1ここでの問題は、外部CDNに依存するのではなく、次から正規化を提供したいということだと思います。 開発では問題ありませんが、本番環境では外部のものに依存したくありません。
IAmNatch
2019年03月08日
next-cssを使用するオプションがない場合、これを解決する2つの方法があります（おそらくCSSモジュールを使用しているため、_appからCSSファイルをインポートしてもグローバルには適用されません）。
最初に$＃$ 2 $＃$を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日
関連する問題
knipferrc
·
3コメント
ghost
·
3コメント
YarivGilad
·
3コメント
flybayer
·
3コメント
jesselee34
·
3コメント
最も参考になるコメント
@jaydensericあなたは、Normalize.cssがCSSのjQueryであることは正しいです。 ブラウザは、HTML要素のデフォルトのスタイルにまだかなり一貫性がありません。Normalize.cssはその問題に対処するのに役立ちます。 Normalize.cssは、最新のプロジェクトでレガシーブラウザをサポートするために必要です。