web-dev-qa-db-ja.com

Next.jsでreactstrapを使用する

_Next.js_を使用してReactアプリを作成しています。reactstrapが提供するコンポーネントを使用しようとしています。

reactstrapガイドで指示されているように、_bootstrap/dist/css/bootstrap.min.css_という名前のCSSファイルをインポートする必要があるようです。

私が見ているエラーはError in bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.です

この作業を正しく行うために私がしなければならないことを誰もが知っていますか？私は新しいウェブ開発者ですので、明らかなものが足りない場合は申し訳ありません。

ありがとう！

javascriptcssreactjsnext.jsreactstrap
17
gsapienza

編集：Next.js 7の時点で、.cssファイルのインポートをサポートするために必要なことは、 withCSS を登録することだけですnext.config.jsのプラグイン。プラグインをインストールすることから始めます。

npm install --save @zeit/next-css

次に、プロジェクトルートにnext.config.jsファイルを作成し、次を追加します。

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

簡単なページを作成し、CSSをインポートすることで、これが機能していることをテストできます。 CSSファイルを作成することから始めます。

// ./index.css
div {
    color: tomato;
}

次に、index.jsファイルを使用してpagesフォルダーを作成します。次に、コンポーネントで次のようなことを実行できます。

// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>

数行の設定でCSSモジュールを使用することもできます。詳細については、 nextjs.org/docs/#css のドキュメントをご覧ください。

Next.js <バージョン7

Next.jsには、デフォルトでCSSインポートが付属していません。 Webpackローダーを使用する必要があります。これがどのように機能するかについては、 https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules をご覧ください。

Next.jsには、CSS、SASS、SCSSのプラグインもあります。 CSSのプラグインは次のとおりです。 https://github.com/zeit/next-plugins/tree/master/packages/next-css 。そのプラグインのドキュメントはそれをかなり簡単にします：

  1. _documentにpages/ファイルを作成します。
  2. ルートにnext.config.jsファイルを作成します。

ドキュメントのコードスニペットを使用すると、CSSファイルをインポートするように設定する必要があります。

少なくともバージョン5.0が必要です。最新のNext.jsがインストールされていることを確認できます：npm i next@latest。

27
mtl

それでもエラーが発生する場合：

Unexpected token (6:3) You may need an appropriate loader to handle this file type.

next.config.jsでこれを試してください：

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

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})
  1. これで、次のようにnode_modulesからstyleshetsをインポートできるはずです。
import 'bootstrap-css-only/css/bootstrap.min.css';

注：Next v 8 +を使用

背景：node_moduleとしてインストールされたCSSを単純にインポートしようとして数時間費やし、さまざまなソリューションは主にハッキングの回避策ですが、上記のように、 シンプルなソリューション です。

コアチームメンバーの1人から提供された

3
Janusz Tomasik