Next.js: CSSファイルをインポートしますか？

これはサーバーでは機能しないということですか？
これに対する回避策はまだないと思います。 cc @arunoda

そうですね、これが機能するためには、next.config.jsのwebpack構成が両側で機能する方法が必要だと思います。

NextでCSSやSASSをうまくプレイできないように見えるという点で、一種の球場のような問題があります。 ページにインポートする標準のReactコンポーネントを含むcomponentsディレクトリがありますが、SASS（またはCSS）ファイルにインポートしようとすると、「このファイルに適切なローダーを使用する必要があります」というメッセージが表示されます。エラーメッセージを入力します。

通常、ReactではSASSファイルをインポートし、style、css、sassローダーを使用してWebpackをコンパイルします。 これらをnext.config.jsファイルに追加しようとしました（そしてNPMがそれらをインストールしました）が、それでも同じエラーメッセージが表示されます。

私のnext.config.jsファイル：

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });
    return config;
  }
}

これらの質問がばかげているように聞こえるか、それらへの答えを詳しく説明しているドキュメントで明らかな何かを見逃している場合は申し訳ありませんが、SASS（または少なくともCSS）をコンポーネントまたはページにインポート/コンパイルする実用的な例がある場合はそれらをロード/コンパイルするためにnext.config.jsに追加する必要があるものは何でも、私はそれを大いに感謝します。 ありがとう！

私はcss-modules-require-hookを使用してい
cssを機能させるため。

@spacedragon css-modules-require-hookをNext.jsと統合する方法の例はありますか？ 動作させるのに問題があります。

誰かがこれを行う方法に光を当てたり、Next内にCSSファイルをインポートしたりすることができれば（コード例を介して）、SASSをコンパイルするのにまだ問題があります。

興味深いことに、READMEファイルが更新されてSVGローダーの例が削除され、SVG、CSS、SASSなどのファイルにローダーを追加することはお勧めしません。 インラインCSSが問題ない理由はわかりませんが、インポートされたCSSは問題ありませんが、それには十分な理由があると確信しています。 私は現在、JSで定義されていない/インライン化されたCSSとSASSを処理しないための最良の戦略について確信が持てません。

@ MikeDigitize ＃627および＃638の

サーバー側でスタイルを処理することは実際には可能であり、非常に簡単です。

ノードに直接：

require.extensions['.css'] = function(file) {
    console.log(file.id)
    return;
}

バベルレジスター経由：

// from https://babeljs.io/docs/core-packages/babel-register/
require("babel-register")({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled.
  ignore: /regex/,

  // Ignore can also be specified as a function.
  ignore: function(filename) {
    if (filename === '/path/to/es6-file.js') {
      return false;
    } else {
      return true;
    }
  },

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  only: /my_es6_folder/,

  // Setting this will remove the currently hooked extensions of .es6, `.es`, `.jsx`
  // and .js so you'll have to add them back if you want them to be used again.
  extensions: [".es6", ".es", ".jsx", ".js"]
});

webpackローダー経由：

• ローダーを無視する-https ：//www.npmjs.com/package/ignore-loader
• isomorphic-style-loader- https：//www.npmjs.com/package/isomorphic-style-loader

サーバーでのレンダリング中に重要なCSSをインライン化できるため、私は個人的に同形スタイルローダーを使用しています。 ホットリロードやその他のDX関連のものも機能します。 サードパーティのコンポーネントの使用が複雑になり、CSSからCが削除されるため、私はJSのCSSがあまり好きではありません。

@viktorbezdek next.jsでisomorphic-style-loaderを正常に使用しましたか？

@noeljacksonそうではありませんが、そうするつもりです。 Next.jsは有望に見え、それを機能させると多くの時間を節約できます。 次の1、2週間で調査し、成功した場合はプルリクエストを送信します。

@viktorbezdekこれは私が取り組んでいるプロジェクトにとって非常に重要なので、これに賞金をかけます。 私は自分が無能ではないことを知っていますが、これを理解するのに十分なバベル変換をデバッグする方法を理解していません。 私はこれらのアイデアの順列を試しましたが、100％機能するものはありません。 私は、babel-plugin-webpack-loadersを使用して、raw-loaderにデータエンコードされたスタイルシートをプルさせることができましたが、どのスタイルローダーも機能しません。 チャイムしてくれてありがとう！ ：） 大変感謝いたします。

これに対する解決策はありますか？ 私は解決策を見たいので、cssをグローバルに含める必要はありません。

FWIW、CSSファイルを/staticフォルダーに置いています。 素晴らしいコロケーションではありませんが、大したことでもありません。

解決策があります。 私はそれをなんとか終えることができませんでした。 私はローカルで最初のプロトタイプを作成しましたが、これは機能しているようですが、完了するまでに数時間かかります。 私は週末の後に終わるとかなり確信しています。 乞うご期待。

@matthewmueller CSSモジュールを使用していますか？

@viktorbezdekこれに取り組んでくれてありがとう！ CSSモジュールのサポート（または同様のもの）は、このプロジェクトIMOにとって重要です。 スタイル付きjsxは、単純な状況では問題ありませんが、スタイルの多いコンポーネントでは読みにくいです。

このようなbabelプラグインはオプションになりますか（サーバー側も）？ https://github.com/gajus/babel-plugin-react-css-modules

私はこれを機能させようとしましたが、運がありません：/

私はCSSモジュールをbabel-plugin-css-modules-transform 。 私のフォークで私のハッキーな例を参照してください。

欠点は、CSSに変更を加えるたびに、サーバーを強制終了して再起動する必要があることです。

一部のReactコンポーネントは、 import静的リソースを介してデフォルトのスタイルを公開します。 たとえば、 https ：

import 'rc-slider/assets/index.css';

このスタイルシートをstatic/ディレクトリにコピーして貼り付けることは確かに可能ですが、将来のコンポーネントの更新時にアップストリームスタイルと同期し続けることはなく、このコンポーネントのドキュメントで推奨されているものと一致しません。

問題は、それらのCSSファイルがグローバルな効果をもたらすことです。 CSSを_キャプチャ_し、Reactライフサイクル内に配置して、マウント解除、サーバーレンダリングなどを行うことができる必要があります。

多くの図書館がそうしていますが、それは良いパターンではないと思います。

Zeit Nextの内部に精通していませんが、 import静的分析を使用してCSSを登録/キャプチャできますか？

できましたが、それは本当に奇妙なことです。 render()の外側にあるものと同様に、コンポーネントのライフサイクル内に魔法のように挿入されます。

//これを他の人と共有したいと思った

ええと...ここでCSSをハックするのに少し時間がかかりすぎましたが、（私にとっては）機能するソリューションにたどり着きました。 確かに、これはハックですが、ホットリロードは機能し、サーバー側の構築も機能します。

（_shudder_）gulpを使用し、このgulpfile（https://gist.github.com/auser/25e88e39d83413773c01f4c000ec2806）で、すべての**/*.scssファイルが連結され、 Stylesコンポーネントに押し込まれます。 「通常の」要素としてのページ。

次の真のpostcssサポートが得られるまで、これが他の誰かに役立つことを願っています。

@auserをハックしてくれてありがとう、私は運が悪かったので一日中webpackの設定を見てきました！

編集：
ところで、gulpfileにsassパーサーを追加する必要があります！

はい、いいえ...純粋なcssファイルをコンパイル済みのファイルと区別する方法として.scss拡張子を使用します。 postcss（ precss ）はsassを十分に模倣しているので、私はそれを持っていません。 sassパーサーを使用して自由に編集してください。

gulpを使用してcssファイルをコンパイルし、インラインでビルドするか、ホットリロードがなくてもかまわない場合は/ staticでビルドするのが、現在のところ最善の解決策のようです。

私はcssインポート+ホットリロードがきれいに機能するようになりました。 cssは文字列としてインポートされ、ユーザーは他の文字列と同じようにページにインライン化できます。 この例を見てください、私がテストするのを手伝ってください、そしてPRは大歓迎です！

https://github.com/davibe/next.js-css-global-style-test

この例はnext.jsの公式例になるはずだと思います。 そうですか？ @rauchg @arunoda @nkzawa （直接関係のない人にタグを付けたらごめんなさい）

@davibeデモとbabel-plugin-wrap-in-jsに感謝します

この例では、CSSファイルとSCSSファイルの使用を確認しています。 これがpostcssとcssnextで機能するかどうか知っていますか？

@ khrome83理由はわかりませんが、.babelrcとnext.config.jsを調整するだけの問題だと思います

@davibe構成に基づいてアプリをデプロイできなかったことがわかりました。 ビルドは.babelrcファイルのnext/babelを読み取ることができませんでした。 私は問題を提出しましたが、これらすべてから解決策が生まれることを本当に望んでいます。 容易さの欠落import file.cssからcreate-react-app 、私は来ソリューションが存在する必要があります知っている:)

私が望む解決策は、おそらく次のようなものです。

https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969

私たちは、インポートをサポートするかもしれません.css （と同様に、我々がサポートしているかもしれません（輸出文字列があること単にモジュールにそれをtranspilingによって） .svg純粋にそれをtranspilingことにより、コンポーネント反応します）

同様に、.svgを純粋なreactコンポーネントにトランスパイルすることでサポートすることもできます

これは非常に単純なトリックです。 別のプロジェクトでこれをどのように処理したかを示す基本的な例を作成します=）

編集： https ： ください

@davibeサンプルに基づいて、 https：//github.com/moxystudio/next.js-style-loaderを作成しましたstyle-loaderに似ています。 SSRもサポートしています。

css-loader （cssモジュールありとなし）、 postcss-loader 、 sass-loaderなどでうまく機能します。 css-loaderを使用する場合、そのurlオプションをfalse設定する必要があることに注意してください。next.jsの画像、フォントなどは/static必要があります。 このすべての情報はREADMEにあります。

楽しんで、フィードバックをください！

レポをありがとう！ それはcssファイルをインポートするために働きました。 blueprintjsを試していますが、cssが正しく読み込まれているようです。 ただし、cssに含まれている@ font-faceルールは機能していないようです。 ：

--------------------編集----------------------

それは実際に機能しています、私の悪いです！
ただし、nextjsルーティングではデフォルトで/ static /の外部に静的コンテンツを提供できず、相対パスによって実際には許可されていないパスでロードされるため、アイコンはロードされません。

@pencilcheckはい、/ staticを指すパスを使用する必要があります。おそらく、READMEでそれをより明確にします。

fonts atmなどのcssファイルに含まれる相対パスに関する回避策はありますか？ または、フォントファイルとcss全体を静的フォルダーにコピーするだけで機能しますか？

@pencilcheckCSSファイルは静的な範囲外にとどまることができます。 画像とフォントは静的な内部にある必要があり、 /static/file参照します。

わかった。 ただし、npmパッケージであるブループリントを使用しているので、node_modules内のファイルを変更する必要がないようにしたいと思います。

@pencilcheck残念ながらそれは不可能です。 next.jsは、画像やその他のアセットの処理方法が非常に厳密です。 この会話を汚さないようにしましょう。可能であれば、next-style-loaderリポジトリで問題を作成してください。

@tgoldenberg問題をよりよく説明できますか、それとも再現方法を教えてください。 私のリポジトリを参照してください。 そこで問題を追跡する方が簡単です。

@davibe 、 yarn超えるnpm install yarnを使用すると問題が発生しました。 ヤーンはいくつかの不可解なエラーをスローしていましたが、私がそれを削除すると、例は本番環境で正常に機能しました。

私はこれを設定するのに4時間費やしただけで、時間を節約したいと思っている人にとっては興味深いかもしれないと思いました。 （現在の例のように）変更時にスタイルを自動的に適用し、PostCSSを介してCSSを実行し、 css-loaderからローカルモジュール名を提供します。 後者の欠如は、「グローバルcss」/「cssインポート」の例の現在の状態で私にとって大きな取引ブレーカーでした。

component.js

import React from 'react';
import stylesheet from './styles.css';

const [css, className] = stylesheet;
const Component = () => (
    <p className={className.paragraph}>
        <Head><style dangerouslySetInnerHTML={{__html: css}} /></Head>
        bazinga
    </p>
);

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        ["wrap-in-js", {
            "extensions": ["css$"]
        }]
    ]
}

next.config.js
exports-loader驚くべきハックに注目してください。 確かに、もっと良い方法が必要ですか？

module.exports = {
    webpack: (config) => {
        config.module.rules.push(
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'emit-file-loader',
                        options: {
                            name: 'dist/[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'val-loader'
                    },
                    {
                        loader: 'exports-loader',
                        options: {
                            0: 'exports[0][1]',
                            1: 'exports.locals'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        );

        return config;
    }
};

私は自分で解決策を思いつきました。これは、 @ satazorがスレッドの上位に投稿したものと非常によく似ています： https ：

next.config.js数行追加するだけです：

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      loader: 'emit-file-loader',
      options: {
        name: 'dist/[path][name].[ext]',
      }
    }, {
      test: /\.css$/,
      loader: 'babel-loader!next-css-json-loader',
    });
    return config;
  },
};

スタイルはjsオブジェクトとしてインポートされるため、 glamorや同様のソリューションで非常に簡単に使用できます。

// .css files now conveniently expose all styles as js objects
import styles from 'some-package/styles.css';
import { css } from 'glamor';
// ...
<div {...css(styles)}>
  this is a nice box. 
</div>

乾杯！ 🍻:)

マークダウンファイルを文字列としてインポートするためにこれを機能させる方法はありますか？ 現在raw-loaderを使用していますが、webpackプラグインであるため、サーバーでは機能しません。

@kristojorg

マークダウンインポート用のbabelプラグインを作成しました。 今は私の携帯電話にありますが、私のGitHubを見ると表示されます。

@ khrome83それは素晴らしいですね。 試してみるのを楽しみにしています

ありがとう@ khrome83！ 試してみます

私はこれを本当に迅速に行わなければならなかったので、readmeを更新しませんでした。 しかし、あなたはそれをbabelプラグインとして含めてから使用します

'File.md'からファイルをインポートします。

私はそれを動かしました、ありがとう！ 非常に役立ちます

これはオフトピックですが、問題はクローズされているので、自由に詳しく説明します:)

マークダウンについては、2つのことができます。

（1）
1つは、マークダウンファイルを文字列として含め、実行時にhtml / reactに変換することです。 これは、cssのnext.jsの例examples/with-globa-stylesheet/.babelrcで使用されているのと同じように、マークダウンファイル拡張子に登録する汎用のwrap-in-js babelローダーを使用して行うことができます。

（2）
あなたができるもう一つのことは、markdown -in-jsを使用して変換時にマークダウンを変換することです
マークダウンドキュメントはすでに事前にレンダリングされているため、実行時に高速になります（jsを実行するだけなので）、これは一部のシナリオではより興味深い場合があります。 また、ライブラリを使用すると、カスタムReactコンポーネントを挿入できます。 残念ながら、このような場合には、あなたの中にマークダウンインラインで記述する必要がsource.jsのように。

（2）を選択した場合、markdown-in-js構文のシンタックスハイライトを提供するアトムプラグインがあり、それはlanguage-markdown-in-jsと呼ばれます。

@davibeヒントありがとうございます！ マークダウンをビルド時間として解析したいのですが、markdown-in-jsで発生する唯一の問題は、作成中にバックティックをエスケープすることです:(。たぶん、babelを使用して文字列としてインポートし、それをmarkdown-in-jsにフィードする必要があります。 ？

@kristojorg

彼女のマークダウンレンダリングがあります。 プラグインを書いた理由も同じです。 マークダウンを文字列としてプルし、それをreact-markdownで実行します。 すべてのリストを処理するListコンポーネントのように、reactコンポーネントを渡してマークダウンレンダリングピースを表すことができるため、これはますますうまく機能します。 StyledJSXでうまく機能します。

これに関する更新はありますか？ 上記のコメントから、現在のところ完璧な解決策はまだないことがわかります。
@arunoda
isomorphic-style-loaderを使用した例を作成することは可能ですか？https：//www.npmjs.com/package/isomorphic-style-loader？

それは完璧でしょう！

npmパッケージからreactコンポーネントをインポートし、次に.cssまたは.scssファイルをインポートする場合の解決策はありますか？ つまり、基本的にnode_modulesからインポートされたファイルをトランスパイルします

私はCreate-React-App（CRA）を数週間使用していますが、今日Next.jsに出くわしました。現在、CRAがサーバーサイドレンダリング（SSR）をサポートしていないため、非常に興奮しています。
箱から出してSSRをサポートするためにNext.jsに切り替えたいのですが、 .scssファイルをインポートできないので困っています。
SASSローダーをWebpack構成に追加する方法を見つけた人はいますか？

cr101に同意しましたが、CSS / SASSがサポートされていないということは、私にとってオプションではないFoundationのようなcssフレームワークを破棄する必要があることを意味します。

私は@davibeによって提供されたリポジトリを使用していは彼が持っていたソリューションで壊れています。

誰かがこれに対する修正を見つけたら、大好きです。 セキュリティバグのため、2.4.1へのアップデートは絶対に必要だったので、元に戻すことはできません。

@Yuripetusko @ CR101 @tgoldenberg絶対に同意するものとします。 正直なところ、次は箱から出して作業できるのは本当に素晴らしいと思います。 ハードコードされた構造（必須の/pagesディレクトリ、 /staticなど）でもすべて問題あり/pages 。 しかし、完全にサポートされていないscssモジュールは、私たちにとってすべてを壊します。 非常に複雑なscss構造があり、自動ブレークポイントとすべてのアスペクト比の再計算があります。 構造を完璧にするために一生懸命働きました。 次は素晴らしいです。私たちが現在持っているすべてのscssものを捨てることはできないからです。 サポートされていないscssは、この美しいツールへの移行を妨げる唯一の、しかし最も重要なことです。

実際、＃1615-いくつかのアクションが進行中です。 @timmywilは、 next動作するようにisomorphic-style-loaderを設定しようとしています。 興味のある方はどなたでもご参加いただけます。

私はこのスレッドが指しているすべての解決策を試しましたが、それらのいずれかを機能させることができました。 だから私は自分で試してみることにしました、そして私はそれをここに文書化し

@almeynmanありがとうございます！ 間違いなくあなたのアプローチで見るつもりです！
ちなみに、この例に従うことで、 scssモジュールを機能させることができました。 私が行ったのは、 sass-loaderと有効なソースマップを追加することだけです。

私はこの方法でnext.js CSS（SCSSでさえ）をサポートすることに成功しました。

まず、 next.config.js 、指定されたローダーとDefintPluginインスタンスを追加して、webpackの設定を微調整します。

const webpack = require('webpack');

module.exports = {
  webpack: (config, {dev}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      exclude: /node_modules/,
    });

    config.plugins.push(
      new webpack.DefinePlugin({
        "process.env": {
          // flag to indicate this is for browser-side
          BROWSER: JSON.stringify(true),
       }
      })
    );

    return config;
  }
};

次に、コンポーネントコードで、条件付きのスタイルファイルを要求します。 これにより、ブラウザ側のバンドルのみにスタイルモジュールが含まれるようになります。

if (process.env.BROWSER) {
  require("./style.scss");
}

if (process.env.BROWSER)気にしないのであれば、それは完璧に機能します。

良いアプローチはここにあり

@almeynman IMOは、そのページに関連するCSSスタイルだけをロードするのではなく、すべてのページでWebサイト全体のCSSコードをロードするため、あまり良いアプローチではありません。
Webサイト全体のCSSではなく必要な.scssファイルのみをインポートすると、必要なCSSコードをロードするだけで、ページのサイズが大幅に削減されます。

@ cr101こんにちは、私はそれを知りませんでした。 私は実際にはその設定を使用していません。他の人の参考のために投稿しただけです（私はそれが良いと思いました...）。 私はまだブログ投稿で説明されて

誰かが興味を持っているなら、より多くの例と議論：

https://github.com/iaincollins/nextjs-starter
https://github.com/zeit/next.js/issues/2534
https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet

上記とこのスレッドに基づいて、PostCSSを使用して以下を変換することができました。

• グローバルSCSSファイル（モジュールは同じです。本番用にすべてのCSSをプリコンパイルするには、エントリポイントが必要です）。
• 相対URLを介して参照されるカスタムフォントを使用してサードパーティのCSSを分離します（インライン化マジックによって解決されます）。

/static/styles/app.css単一のCSSファイルに変換して本番環境で提供し、ホットリロードは引き続き機能します。 styled-jsxの使用法に注意してください。ただし、 <style dangerouslySetInnerHTML={} />を使用することにより、使用せずに実行できます。

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
    require("postcss-url")({ url: "inline" })
  ]
};

next.config.js

ホットリロードのために開発モードで.scssを変換し、prodで単一の.cssファイルに抽出するローダー。 これによりbuild/app.cssられるので、本番ビルドでは、 next build後にcp build/app.css static/styles/app.cssを追加して、静的エクスポートで使用できるようにし、以下に示すようにカスタムヘッダーに埋め込みます。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
  webpack: (config, { dev }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        ...(dev
          ? [
              {
                test: /\.css$/,
                use: ['raw-loader', 'postcss-loader']
              },
              {
                test: /\.s(a|c)ss$/,
                use: [
                  'raw-loader',
                  {
                    loader: 'postcss-loader',
                    options: {
                      sourceMap: true
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true
                    }                    
                  }
                ]
              }
            ]
          : [
              {
                test: /\.(css|scss)/,
                use: ExtractTextPlugin.extract({
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 2,
                        modules: false,
                        url: true,
                        minimize: true,
                        localIdentName: '[hash:base64:5]'
                      }
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
                })
              }
            ]),
        {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'url-loader?limit=100000&&name=[name].[ext]?[hash:8]'
        }
      ]
    },
    plugins: [
      ...config.plugins,
      ...(dev ? [] : [new ExtractTextPlugin('app.css')])
    ]
  }),
};

カスタムヘッダー

const inlineCSS =
  process.env.NODE_ENV !== ENV_PRODUCTION && require('styles/index.scss');
...
      <Head>
        {inlineCSS && <style jsx global> {__html: inlineCSS} </style>}
          {process.env.NODE_ENV === ENV_PRODUCTION &&
            <link
              rel="stylesheet"
              type="text/css"
              href={`/static/styles/app.css?${this.props
                .__NEXT_DATA__.buildId}`}
            />}
      </Head>

お役に立てれば。 さらに詳しい説明が必要な場合はお知らせください。 より多くのソリューションも楽しみにしています。 うまくいけば、それはまだかなりトリッキーで手間のかかる統合なので、誰かが最終的に良いプラグインを思い付くことができます。

すべての.scssファイルを単一のCSSファイルに抽出する代わりに、インポートされた各.scssファイルを独自のCSSファイルにコンパイルする方がはるかに優れています。 そうすれば、各ページに必要なCSSスタイルのみをロードできます。
どうやってやるのかわかりませんが。

私のプルリクエストをチェックアウトしてください、私は良い解決策があると思います：
https://github.com/zeit/next.js/pull/2638

@ cr101それは実際に本当です。 独自の内部UIライブラリをさまざまなプロジェクトにインポートしているため、ロードするファイルのチャンクは常に膨大です（私が知っている理想ではありませんが、その獣のモジュール化に取り組んでいます）。 compile and serve 1 fileからX number of files at X locationsます。 小さなCSSチャンクに分割することと、外部のキャッシュ可能でパフォーマンスの高いCDNでホストされるバージョンとのトレードオフを考慮すると、より複雑になるため、楽しいが、プロジェクト自体が関与すると思います。 編集-Nextが処理することを意図していることの範囲から確実に外れています。私たちが目指すべき最善の方法は、Nextプラグインまたはパターンです。

これにパフォーマンスの問題があるかどうかはわかりませんが、スタイル付きコンポーネントなどを使用している場合、これは非常に簡単な解決策です。CSSラッパーを作成するだけです。

import styled from 'styled-components';

const Collapse = props => (
  <__Collapse>
    { props.children }
  </__Collapse>
);

export default Collapse;

/**
 * CSS
 */
const __Collapse = styled.div`
  .rc-collapse {
    background-color: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
  }
  ...
`;

import RcCollapse from 'rc-collapse';
import Collapse from '~/components/rc/Collapse';

const HelpPage = () => (
  <Collapse>
    <RcCollapse>
      <RcCollapse.Panel header="Title">Content</RcCollapse.Panel>
    </RcCollapse>
  </Collapse>
);

このアプローチで私が気に入っているのは、 .cssをインポートした場合に、元のルールの上にオーバーライドを記述しなくても、ソースCSSからカスタマイズできることです（とにかくほとんどの場合これを行う必要があります）。 node_modulesからの.cssファイル。

これは、 babel-plugin-inline-importを使用してCSSファイルをインポートするための簡単なソリューションです。

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

ページ/コンポーネント

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

@stovmascriptこれは美しい解決策ですが、それでもエラーが発生します（https://github.com/Hacker0x01/react-datepickerから.cssビルドをインポートしています）。 ここで他に何もプレイしていないのですか？ エラーから、別のレベルのCSSロードが必要なようです。

@ hilarykitz 、 @ stovmascriptソリューションは私のために機能します、あなたが得ているエラーを私たちに送ってくれませんか？

@ stovmascript-どのようにしてbabelキャッシュを取り除きますか。

1. CSSファイルを作成する
2. インポートファイル
3. 適用する
4. CSSファイルの変更-新しいセレクターとスタイルを追加します
5. BabelCacheが古いバージョンを保持していることを確認してください

@ khrome83 node_modules /.cacheをクリアする必要があります

キャッシュをクリアして上記で動作するbabel-inline-loaderプラグインを使用したより良い解決策を見つけました。 この方法の問題は、グローバルスタイルしか適用できないことです。 <style jsx global>タグで使用すると、data-jsxが正しく追加されず、目的が正しく無効になります。

キャッシュをクリアして上記で動作するbabel-inline-loaderプラグインを使用したより良い解決策を見つけました。 この方法の問題は、グローバルスタイルしか適用できないことです。 非で使用する場合

@stovmascriptのソリューションを使用して例を追加しました。

https://github.com/zeit/next.js/pull/3157

複数の外部CSSをどのように含めますか？
同じコンポーネントでそれを必要とする2つのライブラリを使用し、それぞれが別々に機能しますが、それらを組み合わせる方法がわかりません。

import rtStyle from 'react-table/react-table.css';
import dpStyle from 'react-datepicker/dist/react-datepicker.css';
...
render() {
    return (
      <div>
        {/* <style jsx global>{ rtStyle }</style> */}
        <style jsx global>{ dpStyle }</style>
...

@CHarnelは<style jsx global>{ rtStyle }{dpStyle}</style>試してください

@almeynmanはこれを取得します：

Module build failed: SyntaxError: C:/.../components/activeUsersTable.js: 
Expected one child under JSX Style tag, but got 2 (eg: <style jsx>{`hi`}</style>)

@CHarnelは両方をテンプレート文字列に入れてみてください

@CHarnelはこのアプローチを試してください
<style jsx global>{ $ {rtStyle} $ {dpStyle} }</style>

@alanhr

私はそれらのcssを1つのjsファイルに入れてエクスポートしようとします

import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
import styles from './index.css'

export default bootstrap + styles

そしてただ

import styles from '../styles'
...
<style jsx global>{styles}</style>

私が作成したhttps://github.com/sheerun/extracted-loaderを使用すると、ExtractTextPluginを開発と本番の両方に使用できます。開発中に別のHTMLを使用したり、jsにcssを挿入したりする必要はありません。

@comus私はあなたのアプローチを使用しました、

@sheerunいいね、ありがとう

next.jsにさらに包括的な例を送信しました。
https://github.com/zeit/next.js/pull/3451

これはnextjsv4より前に機能していました

<style jsx global>{style}</style> <style jsx global>{colors}</style> <style jsx global>{layout}</style>

このアプローチを使用してjsxグローバルスタイルをロードする理由は何ですか？ <style jsx global>{ rtStyle }{dpStyle}</style>

私はemit-files-loader基づいたソリューションを自分で作成しました。 興味のある方はここに投稿できますが、カスタムサーバーの設定に依存しています。基本的に、 .nextビルドディレクトリ内の単一のディレクトリを静的に提供できる必要があります。 サーバーの/_next/...パス構造に依存することで、サーバーなしで構成できる可能性があります。

それ以外はimport stylesheet from './styles/style.[scss|less|stylus|w/e]';と書くことができ、それがスタイルシートファイルへのパブリックパスになるので、 <link>入れることができます。 永続キャッシュ用の?[hash]が含まれ、ホットリロードを実行します。

@nikolakanackiの公式サポートはまもなく導入されます🙏https

@timneutkensこれを見たことがありますが、「すぐに」という見積もりはありますか？ すでにカナリアに入っているようです。
私はすぐに解決策が必要で、2〜3日かけて解決策を探し、基本的に「簡単な修正」である独自の解決策を作成することができました。 私はそれをextract-text-webpack-pluginと組み合わせて、すべての個別の.[css|stylus|less|scss]ファイルを静的に結合し、通常のようにすべてを単一の静的リソースとして利用できるようにすることも考えています。

これらの問題の背後にある主な問題は、本番ビルドと開発ビルドの背後でバックグラウンドで多くの「魔法」が起こっていることです。ホットリロードなどがあります...おそらくソースを読んで、物事がどのように組み立てられているかを見ることができます、しかしそれを作った誰かがそれについていくつかのドキュメントを書いたら素晴らしいでしょう、私はもっと多くの人々が貢献できると思います。

@nikolakanackiすぐに🙏🤐

それをextract-text-webpack-pluginと組み合わせて、すべての個別の。[css | stylus | less | scss]ファイルを静的に結合し、通常のようにすべてを単一の静的リソースとして利用できるようにすることも考えています。 。

次のv5用に作成したプラグインはすでにこれを行っており、まもなくオープンソースになります👍

内部に関するドキュメントの作成に関しては、v5がリリースされた後にすべてがどのように機能するかを文書化する予定です🙏

@timneutkensありがとうございます！

@timneutkensアップデートをありがとう、これが着陸したらここにアップデートを投稿してください！

これに関するニュースはありますか？

あなたが期待している他のニュースがわかりません🤔

これはNext.jsv5でリリースされました。
それはreadmehttps ： //github.com/zeit/next.js#importing -css--sass--less--stylus-filesにもあります

また、言及されたPRは統合され、この問題は解決されました。

ルートプロジェクトに/ staticフォルダーを作成し、file.cssを/ static内に配置してからヘッダーhtml構造ホックに。

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

そして、どこでもclassNameを使用してください！

@comus

非常に包括的でスマートです。これに感謝します。私はこの種のソリューションを一日中探していました。

ルートプロジェクトに/ staticフォルダーを作成し、file.cssを/ static内に配置してから、ヘッダーhtml構造ホックに配置します。

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

そして、どこでもclassNameを使用してください！

アプリケーションのルート（package.jsonファイルが配置されている場所）に「public」フォルダーを作成します。

＃8626経由でサポートが追加されています！