Next.js: [RFC] CSSサポート

@zeit/next-sassようなプラグインは、現在サポートされているCSSモジュールのフレーバーですでに機能していると思いますが、 .module.scssも機能しますか？ または、「純粋なCSSモジュール」というフレーズは.module.cssだけを意味しますか？

Sassのサポートは、私にとってほとんどのプロジェクトで成功するか失敗するかです。

@zeit/next-css/sass/less/stylusプラグインは、このRFC（組み込みサポート）を優先して非推奨になります。 sassがコアとプラグインのどの程度の部分になるかについてはまだ議論中です。 私の現在の考えは、 node-sassを追加すると、sassサポートが有効になるというものです。 TypeScriptで行うのと同様です。 依存関係として追加しない理由は、ネイティブバインディングなどのために、インストールが非常に大きく、非常に遅いためです。

これはエキサイティングです！ 今日と同じように、競合するcssクラス名につまずきました。

質問、TypeScriptではどのように機能しますか？ css-moduleを有効にしていない理由の1つは、cssモジュールをインポートすると任意のオブジェクトが得られることです（ .foo-barがfooBarというフィールドになるなど、少し不思議なことかもしれません）、これはTSフレンドリーではありません。 NextはデフォルトでTSになっているので、この問題でもっとうまくやれると思いますか？

「ユーザーの既知のフレックスバグを自動的に修正する」が良い考えになるかどうかはわかりません。

cssスタイルシートを含むnpmのサードパーティコンポーネントライブラリがnextjs環境で他の環境（create-react-appなど）とは異なる動作をするという混乱したシナリオで終わるのではないかと心配しています。

@TheHolyWaffleが既知のflexbugsを修正すると、より予測可能な動作が作成されます。これは、Create ReactAppが行うことでもあります。

@zenozen CSSモジュールの仕様によると、class-name ）付きのクラス名を使用する場合は、オブジェクトで明示的にアクセスする必要があります。

例えば

import Everything from './file.module.css'

// later on

Everything['class-name']

TSに関しては、タイプを処理するための魔法は計画していませんが、これらのファイルを処理するためのTSタイプを定義するのは非常に簡単です。

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

ここで何をするにしても、今の@zeit/next-cssように、カスタムPostCSSプラグインを簡単に使用できるようにすることはできますか？ それに対するサポートを失ったら、それは本当に残念です— CRAはこれをサポートしておらず、そのため、TailwindCSSのようなツールを合理的な方法で使用することは不可能です。

この点に関して、私はこれら3つの機能に注意します。

• Autoprefixerを使用して、ベンダー固有のプレフィックスを自動的に追加します（レガシーフレックスボックスのサポートなし）
• Stage 3 + CSS機能を同等のものでポリフィルまたはコンパイルします
• ユーザーの既知の「flexbugs」を自動的に修正

...これはすべてPostCSSで行われるため、PostCSSプラグインの順序がエンドユーザーの制御下にあることが非常に重要です。

これらの3つのプラグインをデフォルトで有効にする場合は、ユーザーが独自のpostcss.config.jsファイルを提供することで、デフォルトのPostCSS構成を完全にオーバーライドできるようにすることをお勧めします。 彼らがこのルートを進んだ場合、彼らはそれらのプラグインを手動で追加する必要がありますが、私の意見ではそのレベルの制御が必要です。

TL; DRは、ユーザーがPostCSSを完全に制御できる機能を壊さないように注意してください。このため、文字通りCRAを使用できません。また、Nextを使用できなくなったら非常に悲しいです。

@adamwathan Secondingは-ここでオプションのカスタマイズがどのように見えるかpostcssの詳細を取得するために素晴らしいことです。 複数のプロジェクト間で共有される構成を追加のファイルなしで簡単に挿入できるように、次のプラグインとpostcss.config.jsを介してpostcss構成を変更するオプションがあると非常に便利です。

すべてのcssインポート（ .moduleサフィックスだけでなく）に対してcssモジュールを有効にする方が良いと思います。グローバルにしたいモジュールでは、 .globalサフィックスを指定する必要があります。

CSSモジュールは素晴らしいでしょう。 *.module.(css|scss)仕様を維持することは、 create-react-appと整合し、タイプスクリプトの入力を可能にし、Next.jsを初めて使用する他のユーザーの移行を容易にするため、問題ないと思います。

typescriptですと、あなたが生成することにより、CSSモジュールのタイピングを強制することができます*.d.tsすべてのためのタイピング*.(css|scss)使用してファイルを入力した-CSS-モジュールおよび型付きSCSS-モジュールが、あなたはそれを行うにはしたくない場合やそれでもオートコンプリートが必要な場合は、次のVSCode拡張機能を使用できます。
https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

@adamwathanは、PostCSS構成を許可しますのでご安心ください。 _exact_実装がどのようになるかはまだわかりませんが、CSSプルリクエストで自然に出現するはずです。

これは素晴らしい！！ これにはタイムラインがありますか？ 今年は起こっているのですか？

@andreisoareこのRFCのグローバルな半分をマージしようとしています： https ：

CSSモジュールのサポートをできるだけ早く続けます！

@adamwathan @Timerは、 next-sassできるように、プロジェクトのルートで従来のpostcss.config.jsファイルを引き続き使用できれば素晴らしいと思います。

これがコアになるのを見てとてもうれしいです。

AMPクリティカルパスレンダリングはこのRFCでサポートされますか？

記録として、可能であれば、styled-jsxを使用する必要があります。これにより、css、html、およびjsを1つのアイデア、コンポーネントにカプセル化できるためです。 これをまだ認識していない場合（これはメンテナではなくnext.jsのユーザーへのメモです）、これにより、ブートストラップのようなCSS UIキット全体を購入する必要がなくなり、1つのコンポーネントを試すことができます。ニーズに合わない場合は、外部のCSS依存関係の手荷物を処理する負担なしにそれを投げます。

CSSは誤解されたり、後から考えられたりすることが多く、開発者の仕事の悩みの種になることが多いため、この知識を広めることも非常に重要だと思います。 しかし、適切に抽象化すれば、実際には非常に簡単に推論できます。

「たくさんの人」がCSSをインポートしているからといって、それが素晴らしいアイデアだとは限りません。

reactの最も強力な点の1つは、CSS、HTML、およびJSをカプセル化するという事実だと思います。 また、CSSをサイドロード（インポート）すると、reactがもたらすメリットのようなサイドステップになります。

ちなみに、CSS-in-CSS（またはHTML）は、スタイルのはるかに効率的なトランスポート層であり、jsとスタイルを1つのファイルに配置することは、それらを1つのディレクトリに配置するよりも優れていません。
さらに、最新世代のCSS-in-JSの大部分は、パフォーマンスのためにビルド時にCSSをCSSに抽出するため、静的CSSを適切に管理する必要があります。 ただし、そのような抽出がNextによってサポートされる方法はまだ開示されていません。

記録のために：smile :: SASS、LESSをBootstrapのようなフレームワークで使用することは今でも重要であり、本当に素晴らしい働きをします！ カプセル化はJSレベルで行われてはなりません。 BEMを使用することもできます。 両方の方法をサポートすることが不可欠です。

@timerこれの前半（https://github.com/zeit/next.js/pull/8710）は、CSSのパス分割が機能することを意味しますか？ それとも、それはまだ来るのでしょうか？

（関連、https：//github.com/zeit/next-plugins/issues/190）

グローバルCSSはパス分割できないため、できません。 CSSモジュール（コンポーネントレベルでインポート）のみがパス分割されます。 👍

これが問題＃9392と＃9385にどのように影響するかについての説明はありますか？ 舞台裏で何が起こっているのかを理解するためだけに。 そのため、コードベースの問題を修正する方法を回避することができました。

こんにちは。 Reactアプリをnext.jsにアップグレードして、主に優れたツールとサーバー側のレンダリングを活用することを検討しています。

しかし、私たちにとって、CSSモジュールを使用できることは難しい要件です。 CSSの次のプラグインを試してみましたが、＃9392＃9385などの問題で大混乱を引き起こしました。

CSSモジュールをサポートするためのETAはありますか（実験的でも）？ その開発をスピードアップするのに役立つ方法はありますか？

では、コンポーネントレベルでcssをインポートすることはできませんか？

問題が修正されるまで、今すぐ回避策を使用する必要があります。 次のcssの問題であなたに

ばかげた質問で申し訳ありません。グローバルCSSに関する限り、これは単にリンクを頭に含めるよりもどのように異なる/優れているのでしょうか。

@otwグローバルCSSをインポートすると、コードの残りの部分とともにビルドパイプラインを通過するため、最小化されるなど、next.jsのビルドと出力の一部になります。

それが有利かどうかはあなた次第です。 特定のコンポーネントに必要なCSSが、コンポーネントがロードされたときにのみロードされるように、ほとんどの人がCSSモジュールを楽しみにしていると思います。

コンテキストとして、過去2年間にわたってNextJSを使用して、初期段階のスタートアップ向けに約40のWebアプリケーションを構築してきた開発者チームがいます。

ここで、現在のニーズ、問題点、直面したいくつかの必要なnpmに関する警告、および提案された変更に関する懸念を示すために、アプリケーションのスタイルを設定する方法の概要を説明したいと思います。

現在の実装

• コアアプリ機能の多くが事前に構築された「スターターキット」アプリケーションを維持しています。 Bootstrapを使用するだけで多くの拡張機能が含まれているため、開始点として複製されます。
• 設計システムの基礎として、 BootstrapとReactstrapを使用しています。 一貫性のある設計システムが必要なため、 Bootstrapのガイドラインを使用してグローバルSASSを使用しhttp ：
• 私たちのプロジェクトの多くでは、拡張されたBootstrapセットアップによって提供されるユーティリティクラスを介してスタイリングすることで取得できますが、例外があります。 これらの例外については、 styled-jsxでSASSプラグインを使用http ：
• html、body、root divタグに触れる必要のあるレイアウトコンポーネント、独自のマークアップを生成するプラグイン、ポータルを利用し、コンポーネントからアクセスできないマークアップに触れるためにCSSを必要とするnpmの場合、グローバルオプションスタイルを使用します-jsx。 これは最後の手段ですが、ここで確認できるように、レイアウトコンポーネントに必要です： http ：

現在の欠点/問題

• 私たちは、むしろSASSコードを注入（IDEの問題を注入された言語でサポートの欠如）私たちのコンポーネントではなく使用することはありませんスタイル-JSXと外部SASSファイルを使用する例は、理由のブートストラップ変数のインポート時には動作しません必要で知られているコンパイルのバグをnpmstylis 。 このプロジェクトは現時点ではサポートされていないようですので、NextJSが提案するツールチェーンには含まないことを強くお勧めします。
• styled-jsxSASSにインポートされたグローバルSCSS変数への変更は検出されません。 実際、ブートストラップグローバル変数から伝播する変更をwebpackがホットリロードできないように見える、クリアできないグローバルnpmモジュールキャッシュがあります。 npm ci全体を実行してnode_modulesフォルダー全体を再構築し、ブラウザーキャッシュをクリアすると、ここで機能するグローバルnpmキャッシュがあるため、cache clear forceconsoleコマンドはすべて機能しません。 したがって、コンポーネントに適用されたCSS / SASSモジュールにインポートされたファイルを更新するときに、ホットリロードが正しく機能することを強く望んでいます。 つまり、コンポーネントによって実行されるSASS処理は、インポートの変更を監視し、ホットリロードの動作を維持する必要があります。 これは、前の箇条書きに記載されているwebpackローダーオプションによって解決されたはずです。
• グローバルSASSとstyled-jsxは別々に構築されているため、PostCSS構成を2つの別々の場所で共有するためのソリューションを考え出す必要がありました。

提案された変更に関する懸念

コンポーネントに基づいて、html、body、root divタグ、および生成されたHTMLのケースに触れる必要があるいくつかのユースケースがあるため、コンポーネントCSS / SASSモジュールでグローバルオプションをブロックするという考えに少し関心があります。ポータルなどを介した配置のため、コンポーネント内に存在する必要はありません。グローバルSASSと再構築を使用してこの問題を回避できると思います。そのため、特定のグローバルCSSを適用するためにどのコンポーネントがロードされるかに依存しません。

PostCSSを完全に制御する必要があり、特定のデフォルトのセットを適用するように強制されることに対処する必要はありません。

申し訳ありませんが、これは長い返信でしたが、共有する価値のある洞察がいくつかあったと思います。 ご不明な点がございましたら、お気軽にお知らせください。NextJSチームが次に何を考え出すかを楽しみにしています（しゃれを意図しています）。

@Soundvessel 、

コンポーネントに基づいて、html、body、root divタグ、および生成されたHTMLのケースに触れる必要があるいくつかのユースケースがあるため、コンポーネントCSS / SASSモジュールでグローバルオプションをブロックするという考えに少し関心があります。上記のコンポーネント内に存在する必要はありません

私があなたを正しく理解していれば、CSSモジュールで:globalを使用してそれを達成できるはずです。

@ Daniellt1

私があなたを正しく理解していれば、CSSモジュールで:globalを使用してそれを達成できるはずです。

上記のメモを参照してください

CSSモジュール指定子は、ローカルクラス名と組み合わせると許可されます

レイアウトコンポーネントの場合、ローカルクラス名なしで<html> 、 <body> 、およびルートdivをターゲットにしています。

このトピックに関するビデオでは、 :globalオプションを完全にブロックすることを検討していることも言及されていましたが、触れられないマークアップを生成する多数のnpmとCMS APIを考えると、私には意味がありません。スコープ付きcssモジュールによる。

ちょっと@ Soundvessel-これは私が私のチームのために内部で記録した私のビデオです（どのようにしてこれにアクセスしましたか？）、nextjsチームの見解を直接表すものではなく、作成されてからの最新情報を保証するものでもありません初期の実験段階で。 RFCはこのトピックの基準であると考えてください😁

また、camelCasedプロパティなどの追加の構文を必要とするCSSソリューションの複雑なJSではなく、CSS / SASSの使用を可能にするソリューションを提案していただきありがとうございます。背景、HTML / CSSを直接​​操作した長年の経験があり、コードに表示されているものを画面上でデバッグしているものに深く置き換える必要がないようになります。

上記のいくつかの言及を見逃していない限り、Sassの自動検出/有効化はクールですが、Sass APIオプションもどこかに公開する必要があることを追加したいだけです： [email protected]は許可を含む良いパターンを確立しています適用するsassエンジンを選択するユーザー。 それらのオプションは1：1を超える可能性があります...

CSSモジュールの拡張機能を構成可能にすることを提案したいと思います。
たぶん、 .module.css以外の複数の拡張機能をサポートするために配列を公開しますか？
一部の開発者にとって、多くのコンポーネントがある場合に.module.cssファイルを作成し、それをimport "Component.module.css"にインポートすることは、私たちにとって少し肥大化したようです。

私の場合、拡張子が.m.cssファイルを作成し、 Component.m.cssと言って、 import "Component.m.css"としてインポートできるようにしたいと思います。

Next.jsチームが、これを行うのを妨げるいくつかの技術的な問題があると言わない限り。

拡張機能に名前を付けるための構成を開く必要はないと思います。これは不要なフットプリントの増加のように思われるためですが、これが実装の一部になる場合は、 .module.css拡張機能の_必要性_に疑問を持っています。

Next.jsでは、カスタムページ/_app.js内でのみグローバルCSSをインポートできます。

私は当初、CSSモジュールとして解析する必要があるものとすべきでないものをビルドが検出するために.module.cssが必要だと思っていましたが、 _app.js以外のコンポーネント/ページに非モジュールをインポートする場合エラーが発生してビルドが中断されるため、 _app.js外部にインポートされたものは本質的にCSSモジュールであるため、命名規則は必要ありません。

これは、必要ではなく、純粋に慣例として強制されているのでしょうか。

module.css規則の選択は、 https：//github.com/css-modules/css-modulesによってすでに確立されている修道院と衝突し
ここでの例：
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
そしてここ：
https://www.gatsbyjs.org/docs/css-modules/

はい、おそらく拡張機能を構成可能にすると、必要以上に複雑になる可能性があります。 しかし、少なくとも、定数ファイルで.module.cssを定義し、モンキーパッチを介して変更するためにいくつかの場所でハードコーディングすることはできません。

@bySabi

この提案された実装とcreate-react-appの違いは、 another-stylesheet.cssリンクした例のような「通常のスタイルシート」のインポートはまったく許可されないということです。 その場合、 .module.cssは、ビルドツールがどのスタイルシートをどのように処理するかを決定するために使用されます。

CSSモジュールの仕様では、命名規則はまったく確立されていません。

CSSモジュールは、ファイルの拡張子ではなく、モジュールのインポート方法に関する規則を確立していないことを知っています。

私が行きたいのは、 .module.cssはNext.jsチームによって選択された規則であり、 monkey patching実行するmonkey patching

.module.cssが最初の命名規則だと思います拡張私が間違っている場合は私を訂正してください。

module.css規則の選択は、 css-modules / css-modulesによってすでに確立されている修道院と衝突し
ここでの例：
create-react-app.dev/docs/adding-a-css-modules-stylesheet
そしてここ：
gatsbyjs.org/docs/css-modules

はい、おそらく拡張機能を構成可能にすると、必要以上に複雑になる可能性があります。 しかし、少なくとも、定数ファイルで.module.cssを定義し、モンキーパッチを介して変更するためにいくつかの場所でハードコーディングすることはできません。

ここでのあなたの主張と矛盾しています。 .module.cssは同じ機能のためにcreate-react-appとgatsbyによって使用されています。 それは確立されたパターンです。

ただし、命名規則の変更は確立されたパターンではなく、Next.jsで許可する理由はありません。

.module.cssが最初の命名規則だと思います| Next.Jsによって課された拡張。 私が間違っている場合は私を訂正してください。

Next.jsは、設定より規約を確立します。例：

• ルートであるpagesディレクトリ
• pages/apiはAPIルートです
• .js .tsx .tsxサポート

こんにちは@timneutkens

パターンは、 CSS Modules CSSファイルをJSオブジェクトにインポートする方法を確立する方法にあり、問題のCSSの名前はわずかです。 その点で、Next.jsは新しい実装でその特定のパターンを使用していません。
GatsbyとCRAのようなCSS Modulesは、以前のNextですでに実装されています： https ：

CRAとGatsbyのユーザーをCSS Modulesと混同する可能性があることを知っていても、使用されている規則.module.cssに疑問はありません。 適切な名前を選ぶのは難しく、誰もがいつも満足しているわけではありません。

.m.css規則は、短く（拡張に適している）、冗長性が少ない（importステートメントはモジュールのインポート用です）ので優れていると思いますが、これを考慮に入れてください。 規則を一般的に定義し、定数ファイルで具体的に.module.cssを定義すると、それらにパッチを適用するのに十分に役立ちます。

とにかく、CSSモジュールにおめでとうございます。 あなたは素晴らしい仕事をしました、それは「ほとんど」不可能な仕事のようでした。

命名規則に2セントを追加できる場合：コンパイルにPostCSSが必要なため、 .pcss拡張子を使用するコンポーネントライブラリがあり、この命名規則を使用することにしました。また、これらのCSSをモジュールとしてインポートする必要があります。 。 このケースにどのように対処しますか？ 現在、webpack構成をハッキングし、ローダーのテスト正規表現にパッチを適用していますが、ご想像のとおり、汚れているように感じます。

.module.cssは、グローバル.cssが現在サポートしているのと同じようにpostCSSをサポートしていると思います。

私は何が起こるか知っています、私は休暇が必要だと思います。

PRを確認するとき： https ：

私はこのコードを読んだと心から思った：

index.module.css

.redText {
  color: net;
}

import './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = "redText">
      This text should be red.
    </div>
  )
}

明らかに現実とは何の関係もありません。 実際には、実際のコードはこれです。

import {redText} from './index.module.css'

export default function Home () {
  return (
    <div id = "verify-red" className = {redText}>
      This text should be red.
    </div>
  )
}

CRAやGatsbyのようなCSSモジュールだけです。 したがって、混乱、私の混乱。

間違いをお詫びします。

:-(

CSSモジュールを使用する場合、主な問題は次のとおりです。

私のプロジェクトではCSSモジュールを使用しており、一部のサードパーティコンポーネントもCSSモジュールを使用しています。
しかし...一部のサードパーティコンポーネントはグローバルCSSを使用しています。

.module.css拡張機能のソリューションは、理解と実装が簡単だと思います。
そして、他のフレームワーク（CRA、ギャツビー）はコンセンサスに達しました。

これまで、拡張ソリューションに関して問題は発生していません。
ですから、 .module.css拡張機能の開発を促進したいと思います。

CSSモジュールの問題について別の解決策がある場合は、それが良いでしょう。

@bySabi
.m.cssは短いですが、私はそれが良いとは思いません。
min.cssまたはmodule.cssですか？

@ xyy94813または正反対、すべてのcssインポートはモジュールであり、 .global.scssファイルはグローバルファイルになります

@felixmosh
しかし、公開されたコンポーネントには不向きです。

規則は適切なデフォルトだと思いますが、CSSモジュールに固有のいくつかの構成オプション、たとえばcss-loaderに渡されるものは、「スコープ」の方法を制御したい場合があるため、最終的に利用可能にする必要があります。クラス名が出力されます。 どのCSSファイルを「モジュール」としてロードするかを決定する正規表現を提供するオプションを追加できます。

一部のユーザーは、「スコープされた」クラス名の出力方法を制御したい場合があります。

あなたがそれを望む理由の例？ 何も思いつかない。

なぜあなたがそれを望むのかという例？ 何も思いつかない。

@timneutkensええと、基本的にグローバルクラスの命名パターンに準拠し、最後にスコープ文字列のみを使用する命名パターンを出力したい場合があります。
これを超えて、特定の名前空間をホワイトリストに登録したいビルド後のパージ、分割、またはロードのシナリオを考えていましたが、まだ解決していません。

意見のあるフレームワークは、初期設定を排除し、統一性を強化するために、あなたに代わって決定を下すことを意図していることを覚えておくことが重要だと思います。

これらの決定の一部には、構成オプションまたは拡張機能を介して変更できるデフォルトが付属している必要がありますが、カスタマイズ可能にするすべてのものを使用すると、コードベースが増え、テスト、保守、および文書化するコードが増え、保守も必要になります。

スコープ付き出力ハッシュパターンのようなものは、デフォルトを上書きする必要があるポイントに到達した場合、非常にきめ細かくなります。必要なカスタムローダーを自分で作成する必要があるポイントにいる可能性があります。

新しいReact開発者と仕事をしているとき、私は常に、classNameを介してスコープスタイルの概念をコンポーネントに伝える方がはるかに簡単であることに気づきました。 コンポーネントの外側の要素に一意のclassName（通常はコンポーネント名と同じ）を指定し、SCSSを使用する場合は次のようにスタイルを記述します。

.Navbar {
  .logo { ... }
  .nav-item { ... }
}

css-modulesのメリットは確かにわかりますが、上記のメソッドをサポートしなくなると、Next.jsが新しい開発者にとって使い勝手が悪くなるのではないかと少し心配しています。 多くの人がCSSの注文の問題に直面している場合は、これは良いトレードオフかもしれませんが、 css-modulesは、少なくともnext.config.js介して無効にできるのではないかと思います。 または、技術的にどれだけ実行可能かはわかりませんが、すべてのスタイルが一意のclassNameで適切にスコープされていることを確認するビルド時チェックを行うこともできます。

上記のメソッドをサポートしなくなると、Next.jsが新しい開発者にとって使い勝手が悪くなるのではないかと少し心配しています。

私が何かを誤解しない限り、CSSモジュールのことは排他的ではないと思います。むしろ、ローダーは、インポートするファイルに*.module.css命名パターン、または*.module.scss場合にのみ、CSSモジュールのパーサーを適用します。そのことについては

@ lunelson-bl

ネーミングパターンを使用する場合にのみCRAまたはGatsbyがパーサーを有効にする方法とは対照的に、これは半排他的です。Nextは、モジュール以外のコンポーネントJSへの直接インポートを許可しません。

RFCから：

/* components/button.js */
import { btnLarge } from './button.module.css'

// import '../styles.css'; // <-- this would be an error

非モジュールクラスを使用するには、スタイルシートをグローバルスタイルシートにインポートする必要があります。グローバルスタイルシートは_app.jsのみインポートされます（コンポーネントファイルと分割して同じ場所に配置する場合）。 それ以外の場合は、そのグローバルスタイルシートに直接配置する必要があります。

私はnext.jsの新しいユーザーです。 この号を読んだ後、少し混乱しました。 next.jsがbuild-in-css-supportをサポートしている場合、@ next-cssプラグインは必要ないと思いますが、機能せず、「ModuleParseError」に関するエラーがスローされます。
@ next-cssプラグインを追加してCSSインポートサポートを追加すると、機能するので、@ next-cssなしのbuild-in-css-supportで例を挙げてください。
皆さんありがとう。

私はnext.jsの新しいユーザーです。 この問題を読んだ後、私は少し混乱しています。 next.jsはbuild-cssサポートをサポートしていると思うので、@ next-cssプラグインは必要ありませんが、機能せず、「ModuleParseError」に関するエラーも発生しません。
これを@ next-cssプラグインに追加してCSSインポートのサポートを追加すると、機能するので、@ next-cssなしでcss-buildを作成するにはどうすればよいですか？例を挙げてください。
@ALLに感謝し

次のように、next.config.jsに構成を追加します。

module.exports = {
  experimental: {
    css: true
  }
}

@erkanunluturkありがとう、それは大丈夫ですが、実験的な機能の警告があります、それは重要ですか？
そしてそれはどのようにantdと互換性がありますか？ with-ant-designは大丈夫です。

@Timerインポートant-

別のリンクにいるときでも、Router.push（ "/"）に問題があります。 誰かがそれに対する解決策を持っていますか？ どうもありがとうございました

：warning：よろしければこのスレッドの使用をやめて、トラッカーを発行してください。 これはRFCであり、彼らはまだそれを実装しています。

チームの最後の意味のあるコメントはhttps://github.com/zeit/next.js/issues/8626#issuecomment-531415968ですます。 .js / issues / 8626＃issuecomment -568736218

作業を追跡する可能性がありません。 どのように我々は助けることができます？ @Timerは、このRFCをマイルストーン、ロードマップと関連付けることは可能ですか？ RFCのポイントから何が行われていますか？

わからない、軌道に乗る方法：混乱：

@StarpTechこのRFCは完全に実装されています。 グローバルCSSおよびCSSモジュールは、RFCの説明に従って機能しています。

単一の実験フラグで両方をテストできます！

これ以上の通知の無秩序な増加を防ぐために、このスレッドをロックします。 誰かが問題を特定した場合は、新しい問題を開いてお知らせください。 サポートが正式に安定とマークされたとき（デフォルトでオンになっているとき）にここに投稿します。

9.2に上陸： https ：