web-dev-qa-db-ja.com

Next.js-CSSファイルのインポートが機能しない

React、redux、next.jsを使用してプロジェクトを作成しています。CSSファイルをjsにインポートします。

next.js /＃css および next-css の指示に従いましたが、CSSスタイルが機能しないことがわかりました。

私のコードは次のとおりです：

pages/index.js：

import React from 'react'
import "../style.css"

class Index extends React.Component {
    render() {
        return (
            <div className="example">Hello World!</div>
        );
    }
}

export default Index

next.config.js：

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

style.css：

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

package.json：

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@zeit/next-css": "^0.1.5",
        "next": "^6.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-redux": "^5.0.7",
        "react-scripts": "1.1.4",
        "redux": "^4.0.0",
        "redux-devtools": "^3.4.1"
    },
    "scripts": {
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "dev": "next",
        "build": "next build",
        "start": "next start"
    }
}

質問：

1。Chromeには「Uncaught SyntaxError」がありますが、ページのレンダリングには影響しないようです。しかし、私はまだ理由と解決策を疑問に思っています。 chromeのindex.jsエラーはimg以下です

2。Chromeに示されているように、「example」クラスはありません。つまり、style.cssファイルはロードされません。何か不足していますか？クロムにCSSファイルはありません

前もって感謝します。

javascriptreactjsnext.js
9
ArgenBarbie

編集：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：

pagesフォルダーに_document.jsファイルを作成し、コンパイル済みのCSSファイルにリンクする必要もあります。次のコンテンツで試してください：

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

スタイルシートは.next/static/style.cssにコンパイルされます。つまり、CSSファイルは、コードのhrefタグのlink属性の値である/_next/static/style.cssから提供されます。上記。

最初の質問に関しては、おそらくChromeインポート構文を理解していません。chrome:flagsでExperimental Web Platformフラグを有効にして、それが解決するかどうかを確認してください。それ。

10
mtl

カスタム_ document.jsファイルに作成する必要があります。

Cssを追加するときのカスタムドキュメントは次のようになります。

import React from "react";

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {

  render() {
    const { buildManifest } = this.props;
    const { css } = buildManifest;
    return (
      <html lang="fa" dir="rtl">
        <Head>
          {css.map(file => (
            <link rel="stylesheet" href={`/_next/${file}`} key={file} />
          ))}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}
0
amin_2c

Next.jsを使用する場合は、これを実行します。

ルートプロジェクトでnext.config.jsを作成します

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

function HACK_removeMinimizeOptionFromCssLoaders(config) {
    console.warn(
        'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
    );
    config.module.rules.forEach(rule => {
        if (Array.isArray(rule.use)) {
            rule.use.forEach(u => {
                if (u.loader === 'css-loader' && u.options) {
                    delete u.options.minimize;
                }
            });
        }
    });
}

module.exports = withCSS({
    webpack(config) {
        HACK_removeMinimizeOptionFromCssLoaders(config);
        return config;
    },
});

サーバーの再起動を忘れないでください

0
Mehrdad Masoumi

As Zeit 言った：

  1. / pagesフォルダーと同じレベルに/ staticフォルダーを作成します。
  2. そのフォルダーに.cssファイルを配置します
  3. ページコンポーネントでHeadをインポートし、CSSに追加します。
import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

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

Github のSergiodxaに、この明確な解決策に感謝します。

0
Hamed