Далее. js Global CSS не может быть импортирован из файлов, отличных от вашего Custom <App> - PullRequest
Новая
       84

Далее. js Global CSS не может быть импортирован из файлов, отличных от вашего Custom <App>

4 голосов
/ 31 марта 2020

Мое приложение React работало нормально, также использовалось глобальное CSS.

Я запустил npm i next-images, добавил изображение, отредактировал next.config.js, ran npm run dev, и теперь я получаю это сообщение 

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

Я проверил документы, но я нахожу инструкции немного запутанными, поскольку я новичок в React.

Кроме того, почему эта ошибка произошла сейчас? Как вы думаете, это как-то связано с установкой npm?

Я пытался удалить новые файлы, которые я добавил вместе с их кодом, но это не решает проблему. Я также попробовал то, что предлагает Читать дальше:

Мой компонент высшего уровня. 

import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Bitcoin Watcher</title>
    </Head>
    <Navbar />
    <div className="marginsContainer">
      {props.children}
    </div>
  </div>
);

export default Layout;

Мой следующий.конфиг. js

// next.config.js
  const withSass = require('@zeit/next-sass')
  module.exports = withSass({
  cssModules: true
})

Мой main.s css file 

@import './fonts.scss';
@import './variables.scss';
@import './global.scss';

my global.s css

body {
  margin: 0;
}
:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
  }
}

Самое странное, что я обнаружил, это то, что эта ошибка произошла, не меняя ничего общего с CSS, или Layout. js, и раньше он работал?

Я переместил свой импорт main.s css на страницу pages / _app. js, но стили по-прежнему не отображаются. не приходит через Вот как выглядит страница _app. js 

import '../global-styles/main.scss'

export default function MyApp({ Component, props }) {
  return <Component {...props} />
}

1 Ответ

7 голосов
/ 31 марта 2020

Используйте встроенный загрузчик Next. js CSS вместо устаревшего @zeit/next-sass.

  1. Замените @zeit/next-sass пакет на sass.
  2. Удалить next.config.js или оставьте его с пустой конфигурацией.

next.config. js

module.exports = {
  /* config options here */
};

Переместите global CSS, как указано в сообщении об ошибке.

/ pages / _app. js

import '../global-styles/main.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Вы, вероятно, не сделали У меня не было этой ошибки ранее, потому что Next. js отказался от поддержки global CSS в файлах, отличных от /pages/_app.js, только в последних версиях.

Встроенная поддержка Sass

...