Next.js: 次のプロジェクトにcssを含めますか？

作成日 2016年11月27日 · 31コメント · ソース: vercel/next.js

NextがGlamourとcss-in-jsを使用していることを私は知っています。しかし、次のプロジェクトで実際のcss / less / scssを使用する方法はありますか...どういうわけか？少なくともプロジェクトをブートストラップするために？

私の推論はこれです-Nextが対象としているような単純なサイトの場合、オンラインで購入できるほとんどの既成のhtmlテーマは、純粋なhtmlとcssを使用して作成されています。したがって、必要なのはHTMLをreactコンポーネントに分割し、適切なページフォルダーに配置することだけです。これで完了です。

私は自分のプロジェクトにNextを使用したいと思っていますが、既製のcssをどうにかして活用できない場合は、それは私にとって大きな問題になります。このユースケースの解決策または回避策はありますか？

ソース

manolkalinov

最も参考になるコメント

$＃$ /pages /staticフォルダーを作成します。
そのフォルダに.cssファイルを置きます
ページコンポーネントHeadをインポートし、 <link />をCSSに追加します。

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

これで、Next.jsはページの先頭にリンクタグをレンダリングする必要があり、ブラウザはCSSをダウンロードして適用します。

sergiodxa 2016年11月27日

👍79 👎17 🎉7 ❤2 🚀1

全てのコメント31件

$＃$ /pages /staticフォルダーを作成します。
そのフォルダに.cssファイルを置きます
ページコンポーネントHeadをインポートし、 <link />をCSSに追加します。

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

これで、Next.jsはページの先頭にリンクタグをレンダリングする必要があり、ブラウザはCSSをダウンロードして適用します。

sergiodxa 2016年11月27日

👍79 👎17 🎉7 ❤2 🚀1

うわー、迅速な返信ありがとうございます:)。できます！たった1つの障害があります-最初にページをロードするとき、すべてが正しくレンダリングされる直前に、スタイルが設定されていないhtmlのフラッシュがあります。それが反応後にロードされたcssまたはjsファイルからのものかどうかはわかりません。これに対する回避策はありますか？

とにかく、私はあなたたちがやっている仕事に絶対に感銘を受けました、そして迅速な返事をありがとう！

manolkalinov 2016年11月28日

気にしないでください。インデックスページにもcssリンクとjsリンクを含むヘッダーコンポーネントをインポートしましたが、フラッシュはなくなりました。さらに、アンカータグをリンクコンポーネントに変更すると、残りのジャンプが削除されます。欠点は、Linkコンポーネントがその子からhtmlタグ（アイコンクラスを持つスパンタグなど）を削除するように見えるため、テキストのみが残ることです。

私はこのユースケースが正しく最適化されたものの反対であることを知っていますが、私たちが迅速で汚い...醜さに頼らなければならない場合に本当に役立ちます:)

したがって、事前に作成されたhtmlテーマを統合するためのワークフローは次のとおりです。

静的フォルダーを作成し、テンプレートからすべてのjs / css / imgファイルをコピー/移動します
コンポーネントを含むpage.jsファイルを作成する
コンポーネントにhtmlを追加し、reactに準拠するように変更します
3.1。 Headタグを追加し、その中に元のhtmlのすべてのcss / jsファイルを含めます
3.2。これらのファイルへのパスを更新して、新しい静的フォルダーと一致させます
3.3。ヘッドタグの下にHTMLをコピーして貼り付けます
3.4閉じられていないhtmlタグ（link、input、imgタグを含む）を閉じるか自己閉じます
3.5。 class = "のすべてのインスタンスを検索/置換してclassName ="
3.6。すべてのhtmlコメントを削除する

manolkalinov 2016年11月28日

👍9 🎉3 😄3

@manolkalinov簡単に参照できるように、コードを追加していただけますか？あなたがワークフローを書いたことは知っていますが、サンプルコードを使用すると、問題が発生した場合の追跡とデバッグが容易になります。

ralphievolt 2016年11月29日

👍1

ヘッドタグにCSSを追加することは確かに機能します。しかし、それは一種のハッキーであり、 postcssやsassのようなものを使用したい場合はどうなりますか？既存のcssスタイルをグラマーJSONオブジェクトに変換するにはどうすればよいですか？また、デザイナーがglamorを使用してページのスタイルを設定することも非常に困難です。それを行うためのより良い方法があるに違いありません。
ちなみに、CSSモジュールと比較すると、 glamorを使用するメリットは何ですか？

dzcpy 2016年11月30日

👍6

@andyhuは、 glamorを使用する利点について、 https： //github.com/zeit/next.js#faqをお読みください。
postcssまたはsassについては、webpack構成をカスタマイズすると、それらを使用できるようになります（https://github.com/zeit/next.js/pull/222）。 nextを実行する前に、これらのファイルをcssにコンパイルします。

nkzawa 2016年12月01日

解決したと思います。それでも問題が解決しない場合は、お気軽に再開してください。回答ありがとうございます@sergiodxa ！

nkzawa 2016年12月01日

@nkzawa私はcustomizingwebpack configを使用しているので、プロジェクトで使用する量を減らすことができます。これが私のコードです
next.config.js

/* eslint-disable */

export default {
    webpack: (webpackConfig) => {
        const newConfig = { ...webpackConfig };
        newConfig.module.preloaders.push({
            test: /\.less$/,
            loader:'style-loader!css-loader!less-loader'
        });
        return newConfig;
    },
    cdn: false
}

次に、より少ないファイルimport './index.less'が必要ですが、エラーが発生します

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)

less 、 less-loader 、 css-loader 、 style-loaderをインストールしたと思いますが、よろしくお願いします。

kimown 2017年01月05日

試してみてください

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'less-loader'
      ]
    })

bkniffler 2017年01月09日

@kimownより少ないファイルのインポートに成功しましたか？もしそうなら、あなたはそれをどのようにしたかを共有していただけませんか？

crodriguezvega 2017年06月25日

@sergiodxa node_modulesからcssをインポートするにはどうすればよいですか？

saadbinsaeed 2017年07月19日

👍17

npmパッケージからCSSをインポートすることに関して私自身がこの質問をしました。

例：rc-slider

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

notrab 2017年07月19日

👍12

これに対する答えはありましたか？ @notrab

paulwehner 2017年08月26日

@notrab
これを試して

ルートまたは_documentコンポーネント内

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

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>

saadbinsaeed 2017年08月28日

😕3 👍1

@saadbinsaeed私はこれを試しました。独自のコンポーネントとページで機能します。ただし、インラインではなく、webpackにバンドルしたいと思います。

schoenwaldnils 2017年09月15日

👍1

@schoenwaldnils私はそうしようとしましたが、できませんでした。私の理解によると、サーバー側のアプリケーションを使用しているため、サーバーがcssを認識していないため、個別のcssファイルをバンドルしてクライアントに送信することはできません。 cssをhtmlに埋め込む必要があります。アプリケーション全体でアクセスするには、上記の@sergiodxaに示すように、ルートコンポーネントに埋め込むか、ヘッダーにリンクします。

saadbinsaeed 2017年09月15日

@sergiodxaアプローチを試しましたが、うまくいきません。これは、Nextの最新バージョンにも引き続き適用できますか？

nickwild-999 2017年10月14日

@sergiodxaのおかげ。探していたところです。

fredybustos 2017年11月30日

@sergiodxa答えを変える必要があります。 静力学ではありません！静的である必要があります

ayberkanilatsiz 2017年12月06日

👍2

CSSインポートの使用は、 https：//github.com/zeit/next-pluginsを使用するだけで簡単になりました

1年前の問題のバンプでごめんなさい。どうやら、人々はグーグルを通してここに行き着きます。

timneutkens 2018年08月22日

👍1

CSSインポートの使用は、 https：//github.com/zeit/next-pluginsを使用するだけで簡単になりました
1年前の問題のバンプでごめんなさい。どうやら、人々はグーグルを通してここに行き着きます。

あまり。 node_moduleから直接cssをインポートする簡単な方法を見つけることができないようです。これは仕様によるものですか？

cyberdude 2018年09月14日

👍6

CSSインポートの使用は、 https：//github.com/zeit/next-pluginsを使用するだけで簡単になりました
1年前の問題のバンプでごめんなさい。どうやら、人々はグーグルを通してここに行き着きます。
あまり。 node_moduleから直接cssをインポートする簡単な方法を見つけることができないようです。これは仕様によるものですか？

次のバージョン7以降ではありませんが、すでにご覧になっていますか？以前よりもさらに簡単になりました;）

mtrabelsi 2018年09月30日

@mtrabelsiは、Next.js 7のノードモジュールからcssを直接インポートする方法の例をいくつか挙げていただけますか？ノードモジュールからいくつかのスタイルをインポートする必要がありますが、うまくいく解決策が見つかりません。

bogdan100 2018年11月13日

copy-webpack-pluginを使用してこの問題を修正しました。
webpack config（next.config.js）の場合：

config.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname,'node_modules/react-datepicker/dist/react-datepicker.css'), to: path.join(__dirname, 'static/react-datepicker.css') } ]) );

yarakhater 2018年12月13日

クライアント側のcss修正の修正をチェックアウトできますhttps://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 2019年01月17日

私はそれを行うためのより簡単な方法があると思います：

3つの簡単なステップ：

next-cssプラグインをインストールします。

npm install --save @zeit/next-css

ルートディレクトリnext.config.jsに、次の内容で作成します。

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

これで、次のようにnode_modulesからスタイルシートをインポートできるようになります。

import 'bootstrap-css-only/css/bootstrap.min.css';

_注：Next v 8 + _を使用する

バックグラウンド：
node_moduleとしてインストールされたCSSを単純にインポートしようと数時間費やしました。さまざまな解決策はほとんどハッキーな回避策ですが、上記のように、簡単な解決策があります。
コアチームメンバーの1人によって提供されました： https ：//spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Vrq 2019年03月20日

👍18 🎉12 ❤7

誰かが@sergiodxaの答えを使用している場合、フォルダstaticという名前を付けると、リンクタグはstaticを参照する必要があります。

garrettmaring 2019年11月14日

😂人々は公式ドキュメント（https://github.com/zeit/next-plugins/tree/master/packages/next-css）よりもGitHubの問題を読んでいるようです😂

mtrabelsi 2019年11月14日

@mtrabelsi 、この問題はドキュメントimoよりも価値があります。cssを直接使用する場合、たとえばimport 'bootstrap-css-only/css/bootstrap.min.css';の場合、 @ Vrqの回答が見つかるまで、ドキュメントには何も記載されていません。

Tokenyet 2019年11月24日

👍1

@timneutkens

自分の通常のcssファイルをインポートしようとしています。最後に、 https：//github.com/zeit/next-plugins/tree/master/packages/next-cssのドキュメントを使用してインポートする正しい方法です。
または、 <Head>タグのリンクを介してインポートする2017年の@sergiodxa回答を使用する正しい方法ですか？

これが私の側で見つけたものです：

どちらの方法も、ページを直接ロードするときに機能します（URLに直接移動します）
Router.pushを使用して初めてページに移動する場合は、Sergiosの方法のみが機能します（next-cssドキュメントの方法を使用してもcssはロードされません）
Sergioの方法の唯一の問題は、Router.pushを使用して初めてページにアクセスしたときに、スタイルが設定されていないhtmlのフラッシュが表示されることです。

_documentファイルに私のcssを含める必要なしに、このフラッシュを回避する方法はありますか？

感謝します。

Ollynov 2019年12月03日

Next.jsで提供されるCSSサポートについては、＃8626を参照してください。

Timer 2019年12月03日

このページは役に立ちましたか？

0 / 5 - 0 評価

Next.js: 次のプロジェクトにcssを含めますか？

最も参考になるコメント

全てのコメント31件

関連する問題