web-dev-qa-db-ja.com

React NextJSおよびNext-CSSの場合：このファイルタイプを処理するには、適切なローダーが必要な場合があります

NextJSを使用してReact-App iを構築するには。 cssファイルを使用するには、next-css pluginそれを行うには。しかし、自分のアプリをビルドすると、次のエラーが発生します。

Module parse failed: Unexpected token (1:0)
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({
  cssModules: false,
})

次のように、コンポーネントで.cssファイルをインポートして使用します。

import '../style.css'
export default () => <div className="example">Hello World!</div>

私のcssファイルは次のようになります：

.example {
  color: red;
 }

私の問題はどこですか？誰かがそれを修正するのを手伝ってくれる？

cssreactjswebpacknext.js
9
Niklas

私は問題を解決しました。私のnext.config.js複数のプラグインを使用しています。私の間違いは、私がいくつか書いたことでしたmodule.exportsステートメント。私の場合、解決策は次のようになります。

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

module.exports = withImages(withCSS());
15
Niklas

あなたがどんな問題を抱えているのかはわかりませんが、私は ドキュメントの例 に従いました：

1インストールされたnext-css npm install --save @zeit/next-css

2作成済みnext.config.js

const withCSS = require('@zeit/next-css');
module.exports = withCSS();

3作成済みstyle.cssルートフォルダ内のファイル

.example {
  font-size: 50px;
  background-color: red;
}

4スタイルを含むテストページを作成しました

import '../style.css';

export default () => <div className="example">Hello World!</div>;

結果は this を示します

次の依存関係があります

"@zeit/next-css": "^1.0.1",
"next": "^7.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"

これが少し役立つことを願っています！

5
iurii

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

2
Janusz Tomasik