Next.js: Включить css в следующий проект?

Созданный на 27 нояб. 2016 · 31Комментарии · Источник: vercel/next.js

Я знаю, что Next использует Glamour и css-in-js. Но есть ли способ использовать настоящий css/less/scss в следующем проекте... как-то? Хотя бы для запуска проекта?

Я рассуждаю так: для простых сайтов, таких как те, на которые нацелен Next, большинство готовых html-тем, которые можно купить в Интернете, сделаны с использованием чистого html и css. Итак, все, что вам нужно сделать, это нарезать HTML на компоненты реакции, поместить их в соответствующие папки страницы, и все готово.

Я бы очень хотел использовать Next для своего проекта, но если я не смогу каким-то образом использовать готовый css, это будет для меня нарушением условий сделки. Есть ли решение или обходной путь для этого варианта использования?

Источник

manolkalinov

Самый полезный комментарий

Создайте папку /static на том же уровне, что и папка /pages .
В эту папку поместите файлы .css
В компонентах вашей страницы импортируйте Head и добавьте <link /> в свой CSS.

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

Вот и все, таким образом Next.js должен отобразить тег ссылки в заголовке страницы, а браузер загрузит CSS и применит его.

sergiodxa 27 нояб. 2016

👍79 👎17 🎉7 ❤2 🚀1

Все 31 Комментарий

Создайте папку /static на том же уровне, что и папка /pages .
В эту папку поместите файлы .css
В компонентах вашей страницы импортируйте Head и добавьте <link /> в свой CSS.

import React from 'react';
import Head from 'next/head';

export default () => (
  <div>
    <Head>
      <title>My styled page</title>
      <link href="/static/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Hello world!
    </p>
  </div>
)

sergiodxa 27 нояб. 2016

👍79 👎17 🎉7 ❤2 🚀1

Вау, спасибо за быстрый ответ :). Оно работает! Есть только одна загвоздка - при первой загрузке страницы мелькает нестилизованный html как раз перед тем, как все отрисовывается должным образом. Я не уверен, что это из файлов css или js, загруженных после реакции. Будет ли обходной путь для этого?

В любом случае, я абсолютно впечатлен работой, которую вы, ребята, делаете, и еще раз спасибо за быстрый ответ!

manolkalinov 28 нояб. 2016

Неважно, я также импортировал компонент заголовка со ссылками css и js на страницу индекса, и flash исчез. Кроме того, изменение тегов привязки на компоненты Link устраняет любые оставшиеся переходы. Недостатком является то, что компонент Link, кажется, удаляет любые теги html из своих дочерних элементов (например, теги span с классами значков), так что остается только текст.

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

Итак, рабочий процесс для интеграции готовой HTML-темы таков:

создайте статическую папку и скопируйте/переместите все файлы js/css/img из шаблона
создать файл page.js с компонентом
Добавьте html в компонент и измените его, чтобы он соответствовал реакции
3.1. добавьте тег Head и включите в него все файлы css/js из исходного html
3.2. обновите путь к этим файлам, чтобы он соответствовал новой статической папке
3.3. Скопируйте/вставьте html под тегом head
3.4 Закрыть или самостоятельно закрыть любые незакрытые HTML-теги (включая теги link, input и img)
3.5. Найти/заменить все экземпляры class=" на className="
3.6. Удалить все html-комментарии

manolkalinov 28 нояб. 2016

👍9 🎉3 😄3

@manolkalinov , не могли бы вы добавить свой код для удобства? Я знаю, что вы написали рабочий процесс, но пример кода упрощает отслеживание и отладку в случае возникновения проблемы.

ralphievolt 29 нояб. 2016

👍1

Добавление CSS в тег head точно работает. Однако это немного хакерски, и что, если мы хотим использовать что-то вроде postcss или sass ? Как преобразовать существующие стили CSS в гламурный объект JSON? Дизайнерам также очень сложно стилизовать страницу с помощью glamor . Должен быть лучший способ сделать это.
Кстати, по сравнению с модулями CSS, в чем преимущество использования glamor ?

dzcpy 30 нояб. 2016

👍6

@andyhu, пожалуйста, прочитайте https://github.com/zeit/next.js#faq о преимуществах использования glamor .
О postcss или sass , настройка конфигурации веб-пакета позволит вам использовать их (https://github.com/zeit/next.js/pull/222), или, я думаю, вы можете просто скомпилируйте эти файлы в css перед выполнением next .

nkzawa 1 дек. 2016

Я думаю, что это решено. Не стесняйтесь снова открывать, если у вас все еще есть проблема. Спасибо за ваш ответ @sergiodxa !

nkzawa 1 дек. 2016

@nkzawa Я использую настройку конфигурации веб-пакета, поэтому я могу использовать меньше в своем проекте. Вот мой код
следующий.config.js

/* eslint-disable */

export default {
    webpack: (webpackConfig) => {
        const newConfig = { ...webpackConfig };
        newConfig.module.preloaders.push({
            test: /\.less$/,
            loader:'style-loader!css-loader!less-loader'
        });
        return newConfig;
    },
    cdn: false
}

тогда мне нужен меньший файл import './index.less' , но возникает ошибка

You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:4)

Я уверен, что установил less , less-loader , css-loader , style-loader , можете ли вы дать какое-то предложение, заранее спасибо.

kimown 5 янв. 2017

Тебе стоит попробовать

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        { loader: 'css-loader', options: { importLoaders: 1 } },
        'less-loader'
      ]
    })

bkniffler 9 янв. 2017

@kimown Удалось ли вам импортировать меньше файл? Если да, то не могли бы вы обмена, как вы это сделали?

crodriguezvega 25 июн. 2017

@sergiodxa Как я могу импортировать CSS из node_modules?

saadbinsaeed 19 июл. 2017

👍17

У меня сам был этот вопрос относительно импорта CSS из пакета npm.

Например, rc-слайдер

import 'rc-slider/assets/index.css'

notrab 19 июл. 2017

👍12

Был ли ответ на это? @нотраб

paulwehner 26 авг. 2017

@нотраб
Попробуй это

В вашем корне или компоненте _document

import stylesheet from 'rc-slider/assets/index.css';

<div className='root'>
    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    <Main />
</div>

saadbinsaeed 28 авг. 2017

😕3 👍1

@saadbinsaeed Я пробовал это. Работает для собственных компонентов и страниц. Но я хочу связать его с веб-пакетом, а не с встроенным.

schoenwaldnils 15 сент. 2017

👍1

@schoenwaldnils Я пытался это сделать, но не смог. Насколько я понимаю, мы используем приложение на стороне сервера, поэтому мы не можем объединять отдельные файлы css и отправлять их клиенту, потому что сервер не знает, что такое css. мы должны встроить css в наш html. Чтобы получить к нему доступ во всем приложении, вставьте его в корневой компонент или свяжите его в заголовке, как показано выше @sergiodxa.

saadbinsaeed 15 сент. 2017

Я пробовал подход @sergiodxa , но он у меня не работает. Это все еще применимо к последним версиям Next?

nickwild-999 14 окт. 2017

@sergiodxa спасибо. Как раз искал.

fredybustos 30 нояб. 2017

@sergiodxa Вы должны изменить свои ответы. Это не статика ! Он должен быть статичным

ayberkanilatsiz 6 дек. 2017

👍2

Использовать импорт CSS теперь просто, используя https://github.com/zeit/next-plugins.

Извините за проблему 1-летней давности. Судя по всему, люди попадают сюда через гугл.

timneutkens 22 авг. 2018

👍1

Использовать импорт CSS теперь просто, используя https://github.com/zeit/next-plugins.
Извините за проблему 1-летней давности. Судя по всему, люди попадают сюда через гугл.

Не совсем. Кажется, я не могу найти простой способ импортировать css непосредственно из node_module. Это по дизайну?

cyberdude 14 сент. 2018

👍6

Использовать импорт CSS теперь просто, используя https://github.com/zeit/next-plugins.
Извините за проблему 1-летней давности. Судя по всему, люди попадают сюда через гугл.
Не совсем. Кажется, я не могу найти простой способ импортировать css непосредственно из node_module. Это по дизайну?

Не уж то после следующей 7 версии, вы уже посмотрели? это даже проще, чем раньше ;)

mtrabelsi 30 сент. 2018

@mtrabelsi , не могли бы вы привести пример, как импортировать css напрямую из модуля узла в Next.js 7, потому что я застрял с этим. Мне нужно импортировать некоторые стили из модуля node, но я не могу найти работающее решение.

bogdan100 13 нояб. 2018

Мы исправили эту проблему с помощью плагина copy-webpack-plugin.
В конфигурации веб-пакета (next.config.js):

config.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname,'node_modules/react-datepicker/dist/react-datepicker.css'), to: path.join(__dirname, 'static/react-datepicker.css') } ]) );

yarakhater 13 дек. 2018

вы можете проверить исправление для исправления css на стороне клиента https://github.com/AmanAgarwal041/next-css-fix

AmanAgarwal041 17 янв. 2019

Я думаю, что есть более простой способ сделать это:

3 простых шага:

Установите плагин next-css:

npm install --save @zeit/next-css

Создайте в корневом каталоге файл 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 версии 8+_

Задний план:
Я потратил несколько часов, пытаясь просто импортировать CSS, установленный как node_module, и различные решения в основном представляют собой хакерские обходные пути, но, как показано выше, есть простое решение.
Он был предоставлен одним из членов основной команды: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f .

Vrq 20 мар. 2019

👍18 🎉12 ❤7

Если кто-то использует ответ @sergiodxa , если вы назовете папку static , тег ссылки должен быть static .

garrettmaring 14 нояб. 2019

😂 кажется, что люди читают выпуски GitHub больше, чем официальную документацию (https://github.com/zeit/next-plugins/tree/master/packages/next-css) 😂

mtrabelsi 14 нояб. 2019

@mtrabelsi , эта проблема более ценна, чем документация imo. Если вы хотите использовать css напрямую, например, import 'bootstrap-css-only/css/bootstrap.min.css'; , в документации ничего не упоминается, пока я не нашел ответ @Vrq

Tokenyet 24 нояб. 2019

👍1

@timneutkens

Я пытаюсь просто импортировать свой обычный файл css. В конце концов, это правильный способ импортировать его, используя документацию в https://github.com/zeit/next-plugins/tree/master/packages/next-css .
или это правильный способ использования ответа @sergiodxa еще в 2017 году, который импортируется по ссылке в теге <Head> ?

Вот что я нашел на своем конце:

Оба метода работают, когда вы загружаете страницу напрямую (переходите непосредственно к URL-адресу)
Работает только способ Sergios, когда вы впервые переходите на страницу с помощью Router.push (использование пути из документации next-css не загружает css)
Единственная проблема со способом Серхио заключается в том, что я все еще вижу вспышку нестилизованного html при первом переходе на страницу с помощью Router.push

Любая идея, как избежать этой вспышки, без необходимости включать мой css в файл _document?

Ценить это.