Как импортировать внешний CSS-файл в приложение nextjs

Question

Как импортировать внешний CSS-файл в приложение nextjs

Я работаю над реакцией на основе следующего приложения. Некоторые пакеты npm используют внешний импорт CSS. Я получаю ошибку как

Module parse failed, you may need an appropriate loader to handle this file type.

Как я могу поддержать импорт CSS из внешних пакетов в моем приложении nextjs. Я где-то проверил, внеся изменения в next.config.js, это работает. Но я не могу найти подходящего. Было бы здорово, если бы кто-то мог мне помочь в этом.

15

reactjs nextjs webpack-loader css-import

Источник

user5060303 24 ноя '17 в 12:48

6 ответов

Другие вопросы по тегам reactjs nextjs webpack-loader css-import

user5893921 17 дек '17 в 13:33 2017-12-17 13:33 · Answer 1 · 2017-12-17 13:33

Вы можете добавить файл css в заголовок nextjs.

import Head from 'next/head'

и в методе рендеринга, внутри возвращаемого значения добавьте тег head, похожий на обычный HTML, тег head должен быть внутри div.

<div>
    <Head>
      <title>Test</title>
      <link href="/static/master.css" rel="stylesheet" key="test"/>
    </Head>
</div>

также CSS должен быть в статической папке. Добавьте ключ к тегу ссылки, чтобы повторно использовать CSS на нескольких страницах. Если ключ одинаков на разных страницах, то следующий сервер не будет перезагружать CSS, а вместо этого повторно использует файл CSS.

Таким образом, нет необходимости в каких-либо пакетах CSS.

user4315866 15 ноя '18 в 09:26 2018-11-15 09:26 · Answer 2 · 2018-11-15 09:26

Сначала вам нужно создать next.config.js файл в корневом каталоге

Установить следующий css

npm i @zeit/next-css

в next.config.js

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

Перезапустить приложение

ИСПОЛЬЗОВАНИЕ

import 'react-select/dist/react-select.css'

Не нужно опасно SetInnerHTML

13

Источник

user4315866 15 ноя '18 в 09:26

user1361357 04 дек '17 в 07:06 2017-12-04 07:06 · Answer 3 · 2017-12-04 07:06

импортируйте ваш внешний CSS-файл в компонент. Например, response-select требует, чтобы вы добавили их таблицу стилей, чтобы ее стили работали. Вы можете импортировать их таблицы стилей, используя
```
import rsStyles from 'react-select/dist/react-select.css'
```

Внедрить стиль в ваш компонент, используя dangerouslySetInnerHTML в render метод

render() {
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: rsStyles }} />
      // rest of your component code 
      // where you can use the injected styles
    </div>
  );
}

Tushar Kashyap 28 фев '23 в 19:45 2023-02-28 19:45 · Answer 4 · 2023-02-28 19:45

вы можете просто переместить свой файл css в общую папку /public/{name}.css следующим образом

и импортируйте файл css в файл src/pages/_document.js

      import { Html, Head, Main, NextScript } from 'next/document'

...
<Head>
   <link href="/{name}.css" rel="stylesheet" />
</Head>
...

1

Источник

Tushar Kashyap 28 фев '23 в 19:45

user4721499 14 окт '22 в 23:28 2022-10-14 23:28 · Answer 5 · 2022-10-14 23:28

внутри _app.js вы можете сделать следующее:

      if (someCondition){
import('../styles/rtl.css');
}

0

Источник

user4721499 14 окт '22 в 23:28

user16656366 01 окт '23 в 19:50 2023-10-01 19:50 · Answer 6 · 2023-10-01 19:50

в вашем файле _app.js

поместите все свои js-скрипты в тег в блоке возврата, вот так

      

export default function App(props) {

  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
        />
        <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript" src="/js/Font-Awesome.js"></script>
        <script type="text/javascript" src="/js/select2.min.js"></script>
        <script type="text/javascript" src="/js/slick.min.js"></script>
      </Head>
      <AuthProvider>
      </AuthProvider>
    </>
  );
}