Next.js - импорт css-файла не работает

Я создаю проект с реакцией, redux и next.js и хочу импортировать файлы CSS в js.

Я следовал инструкции импорта Реагировать из «реагировать» импорт «../style.css» класс Index расширяет React . Компонент { render () { return ( < div className = "example" > Hello World ! </ Div > ); } } export default Index = "https://github.com/zeit/next.js/#css" rel = "nofollow noreferrer"> next.js / # css и next-css , но узнайте, что стили CSS не Работа.

Мой код выглядит следующим образом:

Const withCSS = требуется ( '@ Zeit / следующего CSS' ) модуль . экспорт = withCSS () /index.js: 

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

next.config.js:

{
    "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"
    }
}

style.css:

_document.js

package.json:

pages

Вопросы :

1. В Chrome есть «Uncaught SyntaxError», но, похоже, это не влияет на рендеринг страницы. Но я все еще задаюсь вопросом о причине и решении. Ошибка index.js в хроме ниже img

2. Как показано в Chrome, нет «примерного» класса, что означает, что файл style.css не загружен. Я что-то пропустил? нет файла CSS в хроме

Заранее спасибо.

javascript,reactjs,next.js,

1

Ответов: 2

0

Вам также необходимо создать файл в вашей папке и .next / static / style.css в скомпилированный файл 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> ) } }pages

/_next/static/style.css

Стили таблицы стилей скомпилированы, hrefчто означает, что из файла CSS подано сообщение link, которое является значением hrefатрибута в linkтеге в приведенном выше коде.

Что касается первого вопроса, вероятно, Chrome не понимает синтаксис импорта. Попробуйте включить флаг Experimental Web Platformchrome:flags и посмотреть, разрешает ли он это.

0

вам нужно создать в пользовательский файл _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>
    );
  }
}

JavaScript, reactjs, next.js,
Похожие вопросы
Яндекс.Метрика