Next.js: Импорт файлов CSS?

Вы имеете в виду, что это не работает на сервере?
Думаю, у нас пока нет обходного пути. cc @arunoda

да ладно, я думаю, чтобы конфигурация webpack в next.config.js работала с обеих сторон, чтобы это работало.

У меня примерно такая же проблема, потому что я просто не могу заставить Next нормально работать с CSS или SASS. У меня есть каталог components со стандартными компонентами React, который я импортирую на свои страницы, но всякий раз, когда я пытаюсь импортировать в файлы SASS (или CSS), я получаю ~ "вам необходимо использовать соответствующий загрузчик для этого файла" введите сообщение об ошибке.

Обычно в React я импортирую файлы SASS и компилирую Webpack с использованием загрузчиков style, css и sass. Я попытался добавить их в файл next.config.js (и NPM их установил), но все равно получаю то же сообщение об ошибке.

Мой next.config.js файл:

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push({ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] });
    return config;
  }
}

Извините, если эти вопросы звучат глупо или я пропустил что-то очевидное в документах, в которых даются ответы на них, но если у кого-то есть рабочий пример импорта / компиляции SASS (или, по крайней мере, CSS) в компонент или страницу с все, что нужно добавить к next.config.js для их загрузки / компиляции, я буду очень признателен. Благодаря!

Я использую css-modules-require-hook
чтобы css работал.

@spacedragon У вас есть пример интеграции css-modules-require-hook с Next.js? У меня проблемы с его работой.

У меня все еще возникают проблемы с компиляцией SASS, если бы кто-нибудь мог пролить свет на то, как это сделать, или просто импортировать файл CSS в Next, это было бы полезно (с помощью примера кода).

Интересно, что файл README был обновлен для удаления примера загрузчика SVG и изменен, чтобы сказать, что добавление загрузчиков для таких файлов, как SVG, CSS и SASS, не рекомендуется. Я не уверен, почему встроенный CSS подходит, а импортированный - нет, но я уверен, что для этого есть веская причина. Я просто в настоящее время не уверен в лучшей стратегии для обработки CSS и SASS, определенных / встроенных в JS.

@MikeDigitize См. Комментарий к № 627 и № 638.

На самом деле возможно и довольно легко обрабатывать стили на стороне сервера.

прямо в узле:

require.extensions['.css'] = function(file) {
    console.log(file.id)
    return;
}

через регистр Babel:

// from https://babeljs.io/docs/core-packages/babel-register/
require("babel-register")({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled.
  ignore: /regex/,

  // Ignore can also be specified as a function.
  ignore: function(filename) {
    if (filename === '/path/to/es6-file.js') {
      return false;
    } else {
      return true;
    }
  },

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  only: /my_es6_folder/,

  // Setting this will remove the currently hooked extensions of .es6, `.es`, `.jsx`
  // and .js so you'll have to add them back if you want them to be used again.
  extensions: [".es6", ".es", ".jsx", ".js"]
});

через загрузчики веб-пакетов:

• игнорировать загрузчик - https://www.npmjs.com/package/ignore-loader
• загрузчик в изоморфном стиле - https://www.npmjs.com/package/isomorphic-style-loader

Я лично использую загрузчик изоморфного стиля, так как он позволяет мне встроить критический CSS во время рендеринга на сервере. Горячая перезагрузка и другие вещи, связанные с DX, тоже работают. Я не очень-то фанат CSS в JS, так как это усложняет использование сторонних компонентов и каким-то образом отнимает C у CSS.

@viktorbezdek Успешно ли вы использовали загрузчик изоморфного стиля с next.js?

@noeljackson Не совсем, но я собираюсь. Next.js выглядит многообещающе и может сэкономить мне много времени, если я заставлю его работать. Я изучу его в течение следующих недель или двух и отправлю запрос на перенос, если я добьюсь успеха.

@viktorbezdek Я

Есть ли этому решение? Я хотел бы увидеть решение, чтобы мне не нужно было включать css глобально.

FWIW, я только что поместил свои файлы CSS в папку /static . Не самое лучшее размещение, но и не самое главное.

Будет решение. Просто не успел закончить. У меня локально самый первый прототип, который, кажется, работает, однако для его завершения требуется несколько часов. Я почти уверен, что закончу после выходных. Оставайтесь в курсе.

@matthewmueller Вы используете модули CSS?

@viktorbezdek Спасибо за работу! Поддержка модулей CSS (или аналогичные) важна для этого проекта IMO. Стилизованный jsx подходит для простых ситуаций, но его трудно читать для сильно стилизованных компонентов.

Будет ли такой плагин babel вариантом (также на стороне сервера)? https://github.com/gajus/babel-plugin-react-css-modules

Я пытался заставить это работать, но не повезло: /

У меня CSS-модули вроде работают с babel-plugin-css-modules-transform . См. Мой хакерский пример в моей вилке .

Обратной стороной является то, что вам нужно убивать сервер и перезапускать его каждый раз, когда вы вносите изменения в CSS.

Некоторые компоненты React предоставляют стиль по умолчанию с помощью статического ресурса import . Например, чтобы импортировать стиль https://github.com/react-component/slider по умолчанию, можно использовать:

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

Конечно, можно скопировать и вставить эту таблицу стилей в каталог static/ но она не будет синхронизироваться со стилем восходящего потока при будущем обновлении компонента и не соответствует рекомендациям этой документации по компоненту.

Проблема в том, что эти файлы CSS вводят глобальные эффекты. Нам нужно иметь возможность _capture_ CSS и поместить его в жизненный цикл React, чтобы он был размонтирован, отрисован на сервере и т. Д.

Многие библиотеки делают это, но я не думаю, что это хороший шаблон.

Я не знаком с внутренним устройством Zeit Next, но можно ли использовать статический анализ import для регистрации / захвата CSS?

Мы могли бы, но это было бы действительно странно. Подобно тому, что находится за пределами render() волшебным образом вставляется в жизненный цикл вашего компонента.

// Решил, что поделюсь этим с кем угодно

Ну ... Я просто потратил слишком много времени, пытаясь взломать здесь CSS, НО я нашел решение, которое работает (для меня). По общему признанию, это взлом, но горячая перезагрузка работает, как и сборка на стороне сервера.

Используя (_shudder_) gulp, с этим gulpfile (https://gist.github.com/auser/25e88e39d83413773c01f4c000ec2806) все файлы **/*.scss объединяются вместе и помещаются в компонент Styles который я монтирую страницу как «нормальный» элемент.

Надеюсь, это поможет кому-то еще, пока мы не сможем получить настоящую поддержку postcss в следующем.

Спасибо за хак @auser , весь день смотрел конфиг webpack безуспешно!

Редактировать:
Кстати, вам нужно добавить парсер sass в gulpfile!

Да и нет ... Я просто использую расширение .scss как способ отличить чистые файлы css от предварительно скомпилированных. Поскольку postcss (с precss ) достаточно хорошо имитирует sass, у меня его нет. Не стесняйтесь редактировать для себя с помощью парсера sass.

Похоже, что в настоящее время это лучшее решение - использовать gulp для компиляции файла css и его встроенного или даже в / static, если вы не против горячей перезагрузки.

У меня css import + hot reload работает чисто. CSS импортируется как строка, и пользователь может встроить его на страницу, как любую другую строку. Пожалуйста, взгляните на этот пример, помогите мне протестировать и PR приветствуются!

https://github.com/davibe/next.js-css-global-style-test

Я считаю, что этот пример должен стать официальным примером next.js. Имеет ли это? @rauchg @arunoda @nkzawa (извините, если я отметил кого-то, кто не имеет прямого отношения)

@davibe спасибо за вашу демонстрацию и babel-plugin-wrap-in-js

В этом примере я вижу использование файла CSS и файла SCSS. Вы знаете, будет ли это работать с postcss и cssnext?

@ khrome83 Я не понимаю, почему нет, я думаю, что это просто вопрос настройки .babelrc и next.config.js

@davibe Я обнаружил, что не могу развернуть свое приложение на основе вашей конфигурации. Сборке не удалось прочитать next/babel в файле .babelrc . Я отправил проблему, но я очень надеюсь, что из всего этого появится решение. Отсутствует легкость import file.css из create-react-app , но я знаю, что должно быть решение :)

Решение, которое я хочу, вероятно, будет следующим:

https://github.com/zeit/styled-jsx/pull/100#issuecomment -277133969

Мы могли бы поддерживать импорт .css (путем простой его трансляции в модуль, который экспортирует строку) (и аналогично мы могли бы поддерживать .svg , транслируя его в чистый компонент реакции)

и аналогично мы могли бы поддерживать .svg, транслируя его в чистый компонент реакции

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

РЕДАКТИРОВАТЬ: см. Https://github.com/zeit/next.js/pull/982

На основе образца @davibe я создал https://github.com/moxystudio/next.js-style-loader , который, надеюсь, упростит добавление файлов css в проекты next.js. Он похож на style-loader webpack в том, что он будет добавлять / удалять таблицы стилей по мере навигации пользователя. Он также поддерживает SSR.

Он хорошо работает с css-loader (с модулями css и без них), postcss-loader , sass-loader и, возможно, другими. Обратите внимание, что когда используется css-loader, его параметр url должен быть установлен на false beucase next.js изображения, шрифты и т. Д. Должны жить /static . Всю эту информацию вы найдете в README.

Наслаждайтесь и, пожалуйста, дайте мне отзыв!

Спасибо за репо! Он работал для импорта файлов css. Я пробую blueprintjs, и кажется, что css загружается правильно! Однако правило @ font-face, которое включает css, похоже, не работает. :

--------------------редактировать----------------------

На самом деле работает, моя беда!
Однако значки не загружаются, потому что маршрутизация nextjs по умолчанию не позволяет обслуживать статический контент за пределами / static /, а относительный путь фактически заставляет его загружаться с недопустимым путем.

@pencilcheck да, вы должны использовать пути, указывающие на / static, возможно, я сделаю это более понятным в README.

Есть ли обходной путь относительно относительного пути, включенного в файлы css, такие как шрифты atm? Или мне просто нужно скопировать все файлы шрифтов и CSS в статическую папку, чтобы он работал?

@pencilcheck файлы CSS могут оставаться вне статики. Ваши изображения и шрифты должны быть статичными, и вы ссылаетесь на них с помощью /static/file .

Я понял. Однако я использую blueprint, который является пакетом npm, я бы хотел, чтобы мне не приходилось изменять какие-либо файлы внутри node_modules.

@pencilcheck К сожалению, это невозможно. next.js очень строго обрабатывает изображения и другие ресурсы. Давайте не будем загрязнять этот разговор и, если можете, создайте проблему в репозитории next-style-loader.

@tgoldenberg можешь лучше описать проблему или подскажите как воспроизвести? пожалуйста, обратитесь к моему репозиторию. Мне легче отслеживать проблемы там.

@davibe , это закончилось проблемой при использовании yarn над npm install . Yarn выдавал некоторые необъяснимые ошибки, но как только я удалил его, пример отлично работал в продакшене.

Я просто потратил 4 часа, пытаясь настроить это, и подумал, что это может быть интересно всем, кто хочет сэкономить время. Он автоматически применяет стили при изменении (как в текущем примере), запускает CSS через PostCSS и дает вам локальные имена модулей из css-loader . Отсутствие последнего было для меня серьезным препятствием в текущем состоянии примеров «глобального css» / «импорта css».

component.js

import React from 'react';
import stylesheet from './styles.css';

const [css, className] = stylesheet;
const Component = () => (
    <p className={className.paragraph}>
        <Head><style dangerouslySetInnerHTML={{__html: css}} /></Head>
        bazinga
    </p>
);

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        ["wrap-in-js", {
            "extensions": ["css$"]
        }]
    ]
}

next.config.js
Обратите внимание на удивительный хак с exports-loader . Конечно, должен быть способ получше ???

module.exports = {
    webpack: (config) => {
        config.module.rules.push(
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'emit-file-loader',
                        options: {
                            name: 'dist/[path][name].[ext]'
                        }
                    },
                    {
                        loader: 'raw-loader'
                    },
                    {
                        loader: 'val-loader'
                    },
                    {
                        loader: 'exports-loader',
                        options: {
                            0: 'exports[0][1]',
                            1: 'exports.locals'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        );

        return config;
    }
};

Я сам придумал решение, которое очень похоже на то, что @satazor опубликовал выше в теме: https://github.com/jozanza/next-css-json-loader.

Просто добавьте несколько строк в свой next.config.js :

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      loader: 'emit-file-loader',
      options: {
        name: 'dist/[path][name].[ext]',
      }
    }, {
      test: /\.css$/,
      loader: 'babel-loader!next-css-json-loader',
    });
    return config;
  },
};

Стили импортируются как объекты js, поэтому их очень легко использовать с glamor и аналогичными решениями:

// .css files now conveniently expose all styles as js objects
import styles from 'some-package/styles.css';
import { css } from 'glamor';
// ...
<div {...css(styles)}>
  this is a nice box. 
</div>

Ура! 🍻 :)

Есть ли способ сделать эту работу для импорта файлов уценки в виде строк? В настоящее время я использую raw-loader, но поскольку это плагин для веб-пакетов, он не работает на сервере.

@kristojorg

Я только что написал плагин babel для импорта уценки. На моем мобильном телефоне прямо сейчас, но если вы посмотрите мой GitHub, вы увидите это.

@ khrome83 звучит потрясающе. С нетерпением жду возможности попробовать

Спасибо @ khrome83! Я попробую

Пришлось сделать это очень быстро, поэтому ридми я не обновлял. Но вы просто включаете его как плагин babel, а затем используете

импортировать файл из 'File.md';

У меня все заработало, спасибо !! Очень полезно

Это оффтоп, но, поскольку вопрос закрыт, я могу уточнить :)

Для уценки вы можете сделать 2 вещи.

(1)
Один из них - включить файл уценки в виде строки, а затем преобразовать его в html / response во время выполнения. Вы можете сделать это, используя общий загрузчик wrap-in-js babel, зарегистрировав его для расширения файла уценки так же, как он используется в примере examples/with-globa-stylesheet/.babelrc для css в next.js.

(2)
Еще вы можете сделать перевод уценки во время транспиляции с помощью markdown-in-js.
Это может быть более интересным в некоторых сценариях, потому что документ уценки уже предварительно отрисован, поэтому во время выполнения он работает быстрее (он просто выполняет js). Кроме того, библиотека позволяет вам вставлять пользовательские компоненты React. К сожалению, в этом случае вам нужно написать встроенную уценку в вашем source.js как это .

Если вы выберете (2), также знайте, что существует плагин Atom, обеспечивающий подсветку синтаксиса для синтаксиса markdown-in-js, и он называется language-markdown-in-js

@davibe спасибо за подсказку! Я бы предпочел, чтобы уценка анализировалась как время сборки, но единственная проблема, с которой я сталкиваюсь с markdown-in-js, - это экранирование обратных кавычек при составлении :(. Возможно, мне стоит попробовать импортировать как строку с помощью babel, а затем скормить ее в markdown-in-js ?

@kristojorg

Есть ее рендеры уценки. Причина, по которой я написал свой плагин, была той же самой. Я вытягиваю уценку как строку, а затем прогоняю ее через response-markdown. Это работает все лучше, потому что я могу передавать компоненты реакции для представления частей рендеринга уценки, например компонент List для обработки всех списков. Хорошо работает со стилизованным JSX.

Есть ли обновления по этому поводу? Из комментариев выше я вижу, что в настоящее время все еще нет идеальных решений.
@arunoda
Можно ли получить пример с использованием загрузчика изоморфного стиля - https://www.npmjs.com/package/isomorphic-style-loader?

Это было бы замечательно!

У кого-нибудь есть решение при импорте компонента реакции из пакета npm, который, в свою очередь, импортирует файл .css или .scss? поэтому в основном транспиляция файлов, импортированных из node_modules

Я использую Create-React-App (CRA) несколько недель, но сегодня я наткнулся на Next.js и очень обрадовался, потому что CRA в настоящее время не поддерживает рендеринг на стороне сервера (SSR), что очень досадно.
Я хотел бы переключиться на Next.js из-за его поддержки SSR из коробки, но невозможность импортировать файлы .scss сдерживает меня.
Кто-нибудь нашел способ добавить загрузчик SASS в конфиг Webpack?

Согласен с cr101, отсутствие поддержки CSS / SASS означает, что мне придется отказаться от фреймворков css, таких как Foundation, что для меня не вариант.

Я использовал репозиторий, предоставленный не соответствует тому решению, которое у него было .

Был бы рад, если бы кто-нибудь нашел исправление для этого. Обновление до 2.4.1 было абсолютно необходимо из-за ошибки безопасности, поэтому у меня нет возможности вернуться назад.

@Yuripetusko @ cr101 @tgoldenberg Абсолютно согласен. Честно говоря, я думаю, что следующее - это действительно здорово, когда я могу работать из коробки. Все в порядке, даже жестко запрограммированная структура (например, обязательный каталог /pages , /static и т. Д.). Но полностью неподдерживаемые модули scss ломают нам все. У нас очень сложная структура scss с автоматическими точками останова и пересчетом соотношения сторон всего. Мы так много работали, чтобы сделать нашу структуру такой совершенной. Дальше будет здорово, потому что мы не можем просто выбросить все scss вещи, которые у нас есть на данный момент. Неподдерживаемый scss - единственное, но самое важное, что мешает нам перейти на этот прекрасный инструмент.

Собственно, # 1615 - там какое-то действие происходит. @timmywil пытается настроить isomorphic-style-loader для работы с next . Приглашаем всех желающих присоединиться и принять участие.

Я пробовал все решения, на которые указывает этот поток, однако мог заставить любое из них работать. Поэтому я решил попробовать свои силы и зафиксировал это здесь.

@almeynman спасибо! обязательно посмотрю на ваш подход!
Кстати, следуя этому примеру, мне удалось заставить работать модули scss . Все, что я сделал, это добавил sass-loader и включил исходные карты.

Таким образом мне удалось сделать next.js suport CSS (даже SCSS).

Во-первых, в next.config.js настройте конфигурацию webpack, добавив заданные загрузчики и экземпляр DefintPlugin .

const webpack = require('webpack');

module.exports = {
  webpack: (config, {dev}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      exclude: /node_modules/,
    });

    config.plugins.push(
      new webpack.DefinePlugin({
        "process.env": {
          // flag to indicate this is for browser-side
          BROWSER: JSON.stringify(true),
       }
      })
    );

    return config;
  }
};

Затем в коде компонента требуется файл стиля с условием. Это гарантирует, что только связка на стороне браузера будет иметь модуль стиля.

if (process.env.BROWSER) {
  require("./style.scss");
}

Если вы не против if (process.env.BROWSER) , он отлично работает.

Хороший подход здесь

@almeynman IMO, это не очень хороший подход, поскольку вы загружаете код CSS для всего веб-сайта на каждой странице, а не только загружаете стили CSS, относящиеся к этой странице.
Импорт только необходимых вам файлов .scss вместо CSS для всего веб-сайта значительно уменьшит размер страниц за счет загрузки только необходимого вам кода CSS.

@ cr101 Привет, я этого не знал. Я действительно не использовал эту настройку, просто разместил ее для справки для других (я думал, что это хорошо ...). Я все еще использую свой подход, описанный в сообщении в блоге . Если бы вы могли дать мне отзыв об этой настройке, было бы здорово

Еще примеры и обсуждения, если кому интересно:

https://github.com/iaincollins/nextjs-starter
https://github.com/zeit/next.js/issues/2534
https://github.com/zeit/next.js/tree/v3-beta/examples/with-global-stylesheet

Основываясь на вышеизложенном и этой теме, я смог использовать PostCSS для преобразования:

• Глобальный файл SCSS (модули такие же, вам просто нужна точка входа, чтобы предварительно скомпилировать весь ваш CSS для производства).
• Отдельный сторонний CSS с пользовательскими шрифтами, на которые ссылаются через относительный URL (решается с помощью магии встраивания).

в один файл CSS по адресу /static/styles/app.css для использования в производстве, при этом горячая перезагрузка все еще работает. Обратите внимание на использование styled-jsx но это можно сделать и без, используя <style dangerouslySetInnerHTML={} />

postcss.config.js

module.exports = {
  plugins: [
    require("postcss-easy-import")({ prefix: "_" }), // keep this first
    require("postcss-url")({ url: "inline" })
  ]
};

next.config.js

Загрузчики для преобразования .scss в режиме разработки для горячей перезагрузки и извлечения в один файл .css в продукте. Это дает мне build/app.css поэтому при сборке Production я добавил cp build/app.css static/styles/app.css после next build чтобы он был доступен в статическом экспорте и встроен в настраиваемый заголовок, как показано ниже.

const ExtractTextPlugin = require('extract-text-webpack-plugin');

export default {
  webpack: (config, { dev }) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules,
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        ...(dev
          ? [
              {
                test: /\.css$/,
                use: ['raw-loader', 'postcss-loader']
              },
              {
                test: /\.s(a|c)ss$/,
                use: [
                  'raw-loader',
                  {
                    loader: 'postcss-loader',
                    options: {
                      sourceMap: true
                    }
                  },
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true
                    }                    
                  }
                ]
              }
            ]
          : [
              {
                test: /\.(css|scss)/,
                use: ExtractTextPlugin.extract({
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 2,
                        modules: false,
                        url: true,
                        minimize: true,
                        localIdentName: '[hash:base64:5]'
                      }
                    },
                    {
                      loader: 'postcss-loader'
                    },
                    {
                      loader: 'sass-loader'
                    }
                  ]
                })
              }
            ]),
        {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'url-loader?limit=100000&&name=[name].[ext]?[hash:8]'
        }
      ]
    },
    plugins: [
      ...config.plugins,
      ...(dev ? [] : [new ExtractTextPlugin('app.css')])
    ]
  }),
};

настраиваемый заголовок

const inlineCSS =
  process.env.NODE_ENV !== ENV_PRODUCTION && require('styles/index.scss');
...
      <Head>
        {inlineCSS && <style jsx global> {__html: inlineCSS} </style>}
          {process.env.NODE_ENV === ENV_PRODUCTION &&
            <link
              rel="stylesheet"
              type="text/css"
              href={`/static/styles/app.css?${this.props
                .__NEXT_DATA__.buildId}`}
            />}
      </Head>

Надеюсь это поможет. Дайте мне знать, если кому-то нужны дополнительные разъяснения. Жду и других решений. Надеюсь, в конце концов кто-то сможет придумать хороший плагин, поскольку это все еще довольно сложная и жесткая интеграция.

Вместо того, чтобы извлекать все ваши файлы .scss в один файл CSS, было бы гораздо лучше скомпилировать каждый импортированный файл .scss в отдельный файл CSS. Таким образом вы будете загружать на каждую страницу только те стили CSS, которые вам нужны.
Я не уверен, как бы вы это сделали.

Пожалуйста, ознакомьтесь с моим запросом на перенос, я думаю, у меня есть хорошее решение:
https://github.com/zeit/next.js/pull/2638

@ cr101 это правда. Мы импортируем нашу собственную внутреннюю библиотеку пользовательского интерфейса в разные проекты, поэтому всегда есть огромный кусок файла для загрузки (не идеальный вариант, я знаю, все еще работаю над модуляризацией этого зверя). Это будет следующий шаг от compile and serve 1 file до X number of files at X locations . Ситуация усложняется, когда вы принимаете во внимание компромиссы между разбиением на более мелкие блоки CSS и внешними кэшируемыми И производительными версиями, размещенными на CDN, поэтому я думаю, что это будет весело, но сам по себе проект требует участия. EDIT - определенно выход за рамки того, что должен обрабатывать Next, лучшее, к чему мы должны стремиться, - это плагин или шаблон Next.

Не уверен, есть ли у этого проблемы с производительностью, но это довольно простое решение, если вы используете стилизованные компоненты или аналогичные, просто создайте оболочку CSS:

import styled from 'styled-components';

const Collapse = props => (
  <__Collapse>
    { props.children }
  </__Collapse>
);

export default Collapse;

/**
 * CSS
 */
const __Collapse = styled.div`
  .rc-collapse {
    background-color: #f7f7f7;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
  }
  ...
`;

import RcCollapse from 'rc-collapse';
import Collapse from '~/components/rc/Collapse';

const HelpPage = () => (
  <Collapse>
    <RcCollapse>
      <RcCollapse.Panel header="Title">Content</RcCollapse.Panel>
    </RcCollapse>
  </Collapse>
);

Что мне нравится в этом подходе, так это то, что я могу настраивать исходный CSS (что мне и так нужно делать в большинстве случаев), без необходимости писать переопределения поверх исходных правил, если я импортировал .css файл из node_modules .

Вот простое решение для импорта файлов CSS с помощью babel-plugin-inline-import :

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-import",
      {
        "extensions": [".css"]
      }
    ]
  ]
}

страница / компонент

import "prismjs";

import { PrismCode } from "react-prism";
import prismGlobalStyles from "prismjs/themes/prism.css";

export default () => {
    return (
        <div>
            <style global jsx>
                {prismGlobalStyles}
            </style>
            <PrismCode className="language-javascript">
                {`function(noop) {
                    return noop;
                }`}
            </PrismCode>
            {/* ... */}
        </div>
    );
};

@stovmascript, это красивое решение, но я все равно получаю ошибки (я импортирую сборку .css с https://github.com/Hacker0x01/react-datepicker). Вы уверены, что здесь больше ничего не задействовано? Судя по ошибкам, похоже, что нужен другой уровень загрузки CSS.

@hilarykitz , у меня работает решение

@stovmascript - как вы избавляетесь от кеша babel.

1. Сделать файл CSS
2. Импортировать файл
3. Применять
4. Изменить файл CSS - добавить новый селектор и стиль
5. Свидетельство того, что Babel Cache хранит старую версию

@ khrome83 вам нужно очистить node_modules / .cache

Я нашел лучшее решение, используя плагин babel-inline-loader, который очищает кеш и работает с вышеуказанным. Проблема с этим методом в том, что вы можете применять только глобальные стили. При использовании тега, отличного от <style jsx global> , он не будет добавлять data-jsx правильно, нарушая цель.

Я нашел лучшее решение, используя плагин babel-inline-loader, который очищает кеш и работает с вышеуказанным. Проблема с этим методом в том, что вы можете применять только глобальные стили. При использовании в не

Я добавил пример, используя решение @stovmascript :

https://github.com/zeit/next.js/pull/3157

Как включить более одного внешнего CSS?
Я использую две библиотеки, которые требуют этого в одном компоненте, каждая работает отдельно, но я не знаю, как их объединить.

import rtStyle from 'react-table/react-table.css';
import dpStyle from 'react-datepicker/dist/react-datepicker.css';
...
render() {
    return (
      <div>
        {/* <style jsx global>{ rtStyle }</style> */}
        <style jsx global>{ dpStyle }</style>
...

@CHarnel попробуйте <style jsx global>{ rtStyle }{dpStyle}</style>

@almeynman получает это:

Module build failed: SyntaxError: C:/.../components/activeUsersTable.js: 
Expected one child under JSX Style tag, but got 2 (eg: <style jsx>{`hi`}</style>)

@CHarnel попробуйте поместить оба в строку шаблона

@CHarnel попробуйте этот подход
<style jsx global>{ $ {rtStyle} $ {dpStyle} }</style>

@alanhr

Я пытаюсь поместить эти css в один файл js и экспортировать его

import bootstrap from 'bootstrap/dist/css/bootstrap.min.css'
import styles from './index.css'

export default bootstrap + styles

а потом просто

import styles from '../styles'
...
<style jsx global>{styles}</style>

С https://github.com/sheerun/extracted-loader, который я создал, вы можете использовать ExtractTextPlugin как для разработки, так и для производства, нет необходимости в другом html при разработке или внедрении css в js.

@comus Я использовал ваш подход, работает хорошо, спасибо.

@sheerun хороший, спасибо

Я отправил в next.js еще более подробный пример:
https://github.com/zeit/next.js/pull/3451

Это работало до nextjs v4

<style jsx global>{style}</style> <style jsx global>{colors}</style> <style jsx global>{layout}</style>

В чем причина использования этого подхода для загрузки глобальных стилей jsx? <style jsx global>{ rtStyle }{dpStyle}</style>

Я сделал себе решение на основе emit-files-loader . Если кому-то интересно, я могу опубликовать его здесь, но он основан на настраиваемой настройке сервера - в основном вам нужно иметь возможность статически обслуживать один каталог в каталоге сборки .next . Вероятно, его можно было бы настроить без сервера, полагаясь на структуру пути /_next/... на сервере.

Кроме того, вы можете написать import stylesheet from './styles/style.[scss|less|stylus|w/e]'; и это будет общедоступный путь к вашему файлу таблицы стилей, поэтому вы можете поместить его в <link> . Он включает в себя ?[hash] для постоянного кеширования и выполняет горячую перезагрузку.

Официальная поддержка @nikolakanacki будет представлена ​​очень скоро 🙏 https://github.com/zeit/next.js/pull/3578

@timneutkens Я видел это, есть ли оценка "очень скоро"? Я уже вижу это на канарейке.
Мне просто сразу понадобилось решение, я потратил 2-3 дня на его поиски и смог написать свое собственное, что, по сути, является «простым решением». Я даже подумываю объединить его с extract-text-webpack-plugin чтобы можно было статически объединить все отдельные файлы .[css|stylus|less|scss] и сделать их все доступными как единый статический ресурс, как обычно без следующего.

Основная проблема, стоящая за этими проблемами, я думаю, заключается в том, что за производственными и девелоперскими сборками творится много "магии", с горячей перезагрузкой и прочим ... Можно было бы, вероятно, прочитать исходный код и посмотреть, как все собирается вместе , но было бы здорово, если бы кто-то, кто его построил, написал несколько документов по этому поводу, я думаю, что больше людей могли бы внести свой вклад.

@nikolakanacki очень скоро 🙏 🤐

Я даже подумываю объединить его с плагином extract-text-webpack, чтобы можно было статически объединить все отдельные файлы. [css | stylus | less | scss] и сделать их все доступными как единый статический ресурс, как обычно без следующего .

Плагины, которые я написал для следующей версии 5, уже делают это, скоро они будут открыты 👍

Что касается написания документации по внутреннему устройству, мы планируем задокументировать, как все работает после выхода v5 🙏

@timneutkens Спасибо!

@timneutkens спасибо за обновление, пожалуйста,

Есть новости по этому поводу?

Не знаю, каких еще новостей вы ждете 🤔

Это было выпущено в Next.js v5.
Это даже в ридми https://github.com/zeit/next.js#importing -css - sass - less - stylus-files

Также упомянутый PR был объединен, и этот вопрос закрыт.

просто создайте / static папку в корневом проекте и поместите свой file.css внутрь / static, затем в заголовок структуры html.

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

а затем используйте className где угодно!

@comus

Очень всеобъемлющий и умный .. Спасибо за это .. Я весь день искал такое решение ..

просто создайте папку / static в корневом проекте и поместите свой файл file.css внутрь / static, а затем в структуру заголовка html.

import Head from 'next/head';
<Head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="/static/css/custom.css" />
</Head>

а затем используйте className где угодно!

Создайте «общедоступную» папку в корне вашего приложения (где находится файл package.json).

Поддержка добавляется через # 8626!