Я сталкиваюсь с той же проблемой, просто пытаюсь использовать Linaria, которая имеет собственные имена классов. Хотя файлы css, которые он создает, не оканчиваются на .module.css , они являются «модулями». Мне нужен простой способ интеграции с библиотекой.

почему вообще перешли на nextjs снова?

Я также хотел бы иметь возможность использовать GlobalCSS вне node_modules. Это поможет нам постепенно внедрять модули CSS.

да это очень важно! многие пакеты npm не работают с nextjs, но работают с CRA или другими фреймворками

Для всех, кто пытается использовать это с реализацией js dart sass для таких вещей, как @use support и модули sass, если у вас есть -любой- другой модуль node, который зависит от node-sass, следующая настройка по умолчанию будет использовать node-sass вместо sass. Локально я исправил это, выполнив следующие действия:

// example next.config.js
module.exports = {
webpack(config, options) {
  config.module.rules.forEach(rule => {
          if (rule.oneOf) {
            const nestedScss = rule.oneOf.find((one) => {
              return one.test
                && 'some.scss'.match(one.test) 
                && one.issuer 
                && one.issuer.include 
                && one.issuer.include.includes('_app');
            });
            if (nestedScss) {
              const sassLoader = nestedScss.use.find(u => u.loader.includes('sass-loader'));
              // Set implementation to sass instead of node-sass here.
              sassLoader.options.implementation = require('sass');
            }
          }
        })
  }
}

Затем вам нужно будет импортировать ваши scss-файлы в _app.js .

@smurrayatwork, это взлом, а не кодирование, извините

Кроме того, ограничение на использование исключительно _app.js немного обременительно.

Если мы не собираемся поддерживать ссылки CSS повсюду, можем ли мы сделать так, чтобы на CSS также можно было ссылаться посредством прямых зависимостей _app (на которые больше нигде нет ссылок)?
т.е. Это нормально, если этого требует _app (и нигде больше), что дает CSS детерминированный порядок, основанный на импорте.

Это не идеально, однако вариант использования, который у меня есть, заключается в том, что у меня есть одна кодовая база, совместно используемая несколькими приложениями, которые импортируют общий модуль, который импортирует общий CSS. Я бы не хотел дублировать этот общий импорт CSS в _app.js для каждого приложения. В настоящее время, чтобы обойти это, мне пришлось бы сделать несколько причудливых метапрограммирований js, потому что мы не можем требовать css в других модулях.

Вместо этого я хотел бы, чтобы мой нынешний подход работал, а именно: у меня есть «Фабрика приложений», которая импортирует весь общий CSS. Затем _app использует фабрику и импортирует собственный CSS поверх общих.

Я добавляю https://github.com/vercel/next.js/discussions/13991, поскольку думаю, что это связано с этой проблемой.

+100 к этому. Мне нужно скопировать и вставить файлы css модуля узла в мой проект и добавить к ним .module.css

Вот еще один пример.

В случае пакета pdf-viewer-reactjs его зависимости требуют CSS, который также необходимо импортировать из _app.js .

Это раздувание CSS для всего приложения, и я не уверен в конфликтах на данном этапе.

импортировать 'response-quill / dist / quill.snow.css';
импортировать 'response-image-crop / dist / ReactCrop.css';
import '../../node_modules/material-design-icons/iconfont/material-icons.css';
import '../../node_modules/bulma/css/bulma.css';
import '../../node_modules/bulma-helpers/css/bulma-helpers.min.css';

Дополнительно на консоль выводится следующее:

предупреждение - ./node_modules/material-design-icons/iconfont/material-icons.css
Глобальный CSS нельзя импортировать из node_modules.
Подробнее: https://err.sh/next.js/css-npm
Расположение: node_modules / pdf-viewer-reactjs / dist / pdf-viewer-reactjs.js

./node_modules/bulma/css/bulma.css
Глобальный CSS нельзя импортировать из node_modules.
Подробнее: https://err.sh/next.js/css-npm
Расположение: node_modules / pdf-viewer-reactjs / dist / pdf-viewer-reactjs.js

./node_modules/bulma-helpers/css/bulma-helpers.min.css
Глобальный CSS нельзя импортировать из node_modules.
Подробнее: https://err.sh/next.js/css-npm
Расположение: node_modules / pdf-viewer-reactjs / dist / pdf-viewer-reactjs.js

./node_modules/material-design-icons/iconfont/material-icons.css
Ошибка сборки модуля: ошибка: окончательный загрузчик (./node_modules/next/dist/build/webpack/loaders/error-loader.js) не вернул буфер или строку

./node_modules/bulma/css/bulma.css
Ошибка сборки модуля: ошибка: окончательный загрузчик (./node_modules/next/dist/build/webpack/loaders/error-loader.js) не вернул буфер или строку

./node_modules/bulma-helpers/css/bulma-helpers.min.css
Ошибка сборки модуля: ошибка: окончательный загрузчик (./node_modules/next/dist/build/webpack/loaders/error-loader.js) не вернул буфер или строку

Привет ! У кого-то это решалось и как? Так много узловых модулей, которые я не могу импортировать из-за этого.

Возможно, использование глобальных стилей в компонентах может быть активировано с помощью next.config.js , или может появиться уродливое консольное предупреждение о глобальных стилях, если есть опасения по поводу нарушения лучших практик / мнений NextJS.

Но это важно для пользователей, переходящих с CRA> NextJS. Это блокиратор для нас, потому что мы не можем переключаться, а затем постепенно внедрять такие вещи, как модули CSS.

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

next.config.js

const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
...
module.exports = withPlugins([
...
withCSS,
]);

@abdelrahmantoptal 's Вы знаете, как заставить это работать для SASS?

Похоже, это будет работать для CSS, но выдает ошибку при импорте SASS:

error - ./src/components/layouts/Footer.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <strong i="8">@import</strong> 'styles/vars';
| 
| footer {

поэтому я попытался добавить загрузчик SASS в конфигурацию webpack перед использованием плагина withCSS:

      config.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader'
        ]
      });

Но это вызвало:

error - ./src/components/App.scss
ReferenceError: self is not defined

Я также попытался заменить @zeit/next-sass , но это вызвало ту же ошибку:

error - ./src/components/App.scss
ReferenceError: self is not defined

Есть предложения о том, как настроить код для использования SASS?

Кто-нибудь случайно успешно реализовал https://github.com/balena-io-modules/rendition ?

https://github.com/balena-io-modules/rendition/issues/1164

Я отказался от Gatsby, а вскоре и от Next.js из-за их небольших, но очень блокирующих, самоуверенных функций, таких как эта. Сейчас я не могу использовать плагин CodeBlock для CKEditor 5, потому что не могу обойти эту ошибку. Всегда должен быть способ обвести эти конфигурации.

Было бы очень полезно получать новости об этой проблеме от @Timer или кого-то из

Согласованный! Невероятно распространено иметь CSS в модулях узлов. Как разработчик, я не могу контролировать, как другие разработчики структурируют свои модули узлов, и другие разработчики не ожидают, что размещение css в модуле узла нарушит работу веб-фреймворка.

@OssiPesonen вы это уже видели? Этот обходной путь не идеален, но тем временем он решил проблему для меня.

@OssiPesonen вы это уже видели? Этот обходной путь не идеален, но тем временем он решил проблему для меня.

Не понимаю, как это помогает? Проблема не в том, что мне нужно вручную импортировать некоторые файлы CSS из узловых модулей. Проблема в том, что пакеты npm сами импортируют CSS. Пакет, содержащий такую ​​строку:

import '../theme/stylesheet.css'

Заставит next.js вылететь с удвоенной силой. И, видимо, совет сопровождающего:

Обратитесь к сопровождающему и попросите его опубликовать скомпилированную версию своей зависимости.

В какой стране фантазий живут люди, где, по их мнению, вы можете просто связаться с сопровождающими и попросить их перекомпилировать для вас пакет в очень быстром темпе? Это будет мешать кому-нибудь неделями! Этот билет открыт уже 4 месяца. Это недопустимо при работе над быстро меняющимися проектами.

Мы собираемся разрешить импорт CSS из node_modules в любой файл компонента в течение следующей недели (на канарейке)! Мы опубликуем здесь, когда он будет готов к тестированию.

Если кому-то это нужно до выпуска, я смог использовать плагин next-transpile-modules для переноса модуля из node_modules который импортировал CSS. Сработало для меня как шарм.

@BrandonE кажется, что next-transpile-modules все еще должны иметь модули с именем *.module.css . Вы нашли способ обойти это?

@rjoaopereira Не могу сказать, что у меня есть глубокое понимание того, как все это работает, но большая часть моих node_modules , импортированных CSS, работала только с плагином @zeit/next-css . Только один не сделал, и в этот момент транспиляция устранила проблему. Это далеко не изящное решение, и я надеюсь, что будущие версии Next.js позволят нам тратить меньше времени на алхимию Babel / Webpack и больше на создание веб-приложений.

У меня это почти работает со следующими изменениями.

следующий 9.5.3
следующие транспайл-модули 4.1.0
Компоненты первой стороны с эмоциями.
Сторонние компоненты с сочетанием модулей css и глобального css

scopedcomponents следует заменить используемыми сторонними компонентами.

//next.config.js
const withCustomWebpack = require("./webpack-custom.config");
const withNextCSSOverride = require("./next.config.css");
const withTM = require("next-transpile-modules")(["@scopedcomponents"]);

module.exports = withCustomWebpack(
  withTM(
    withNextCSSOverride({
      poweredByHeader: false
    })
  )
);

///next.config.css.js
const {
  getCssModuleLocalIdent
} = require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent");
const path = require("path");
/**
 * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions
 */
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      const nextCssLoaders = config.module.rules.find(
        rule => typeof rule.oneOf === "object"
      );

      if (nextCssLoaders) {
        const nextCssLoader = nextCssLoaders.oneOf.find(
          rule =>
            rule.sideEffects === false &&
            regexEqual(rule.test, /\.module\.css$/)
        );

        if (nextCssLoader) {
          /***********************************************************
           * change the rule to match all scopedcomponents css files
           ***********************************************************/
          nextCssLoader.test = /(@scopedcomponents|react\-virtualized)\/.*\.css$/;

          const cssLoader = nextCssLoader.use.find(({ loader }) =>
            loader.includes("css-loader")
          );

          if (cssLoader) {
            /***********************************************************
             * Override the default behaviour for CSS modules discovery
             * auto = true makes webpack search for *.module.css
             * https://webpack.js.org/loaders/css-loader/#auto
             ***********************************************************/
            cssLoader.options.modules.auto = /@scopedcomponents\/.*\.css$/;
            /***********************************************************
             * Nextjs overrides the default mode to "Pure"
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack/config/blocks/css/loaders/modules.ts#L35
             * Put it back to normal
             ***********************************************************/
            cssLoader.options.modules.mode = "local";
            /***********************************************************************************************************************
             * There is a problem when using components built with css-modules with Nextjs.                                        *
             * NextJS will consume code from `lib` on the server side and from `es` on the client.                                 *
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack-config.ts#L374                            *
             * This raises a problem when generating the classes for different environments,                                       *
             * throwing an error of className mismatch due to the hash created being based on the file path                        *
             * https://github.com/vercel/next.js/blob/v9.5.2/packages/next/build/webpack/config/blocks/css/loaders/modules.ts#L26  *
             * https://github.com/webpack/loader-utils/blob/v1.4.0/lib/interpolateName.js#L39                                      *
             * To solve this, when generating the classNames for 3rd party components,                                                 *
             * we need to tell cssloader to always use the same path                                                               *                                                                          *
             *                                                                                                                     *
             *  https://github.com/zeit/next-plugins/issues/595                                                                    *
             ***********************************************************************************************************************/
            cssLoader.options.modules.getLocalIdent = (
              context,
              localIdentName,
              localName,
              options
            ) => {
              const newContext = { ...context };
              if (newContext.resourcePath.includes("@scopedcomponents")) {
                newContext.resourcePath = newContext.resourcePath.replace(
                  `${path.sep}es${path.sep}`,
                  `${path.sep}lib${path.sep}`
                );
              }
              return getCssModuleLocalIdent(
                newContext,
                localIdentName,
                localName,
                options
              );
            };
          }
        }
      }

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, options);
      }

      return config;
    }
  });
};

Проблемы:

• У меня больше нет SSR в режиме разработки. Производственные работы.
• У меня все еще есть переопределение CSS в производстве, но не в разработке, что было мотивацией для удаления next-css, как указано в https://github.com/vercel/next.js/issues/11448 и https://github.com /vercel/next.js/issues/10148

@Timer есть обновления по этому

Мы собираемся разрешить импорт CSS из node_modules в любой файл компонента в течение следующей недели (на канарейке)! Мы опубликуем здесь, когда он будет готов к тестированию.

Будет ли после этого исправления выполняться динамический импорт CSS из компонента?

Большое спасибо @Timer

next@^9.5.4-canary.10 теперь позволяет импортировать глобальный CSS из node_modules любом месте вашего приложения. Это улучшает взаимодействие со сторонними библиотеками React, которые требуют, чтобы вы импортировали их CSS, но не хотите, чтобы он увеличивал размер пакета для всего вашего приложения.

@Timer Не могу дождаться этого релиза, очень ценю вашу работу 💯 ❤️

Спасибо @Timer !

В настоящее время для меня это проблема с блокировкой, однако, когда я тестировал это сегодня, все еще видел то же сообщение об ошибке. Есть ли что-то большее, чем просто обновление до 9.5.4-canary-10? Этот пример пытается использовать стороннюю библиотеку @rmwc

@johmike Вы импортируете с использованием следующего синтаксиса ??

import "@rmwc/avatar/avatar.css";

Вы пытались перезапустить сервер разработки после установки последней версии next ?

@Timer Большое спасибо за эту функцию. Отлично подходит для импорта файла CSS из папки node_modules .

import 'prism-themes/themes/prism-darcula.css';

Есть ли планы по поддержке импорта глобального CSS вне директории node_modules ?

@sasivarnan
Это исходит из другой библиотеки, которая импортирует компоненты @rmwc . Эта библиотека использует @require("@rmwc/avatar/avatar.css") . Я импортирую import {Avatar} from "library/Avatar" и это не удается.

@sasivarnan

Это исходит из другой библиотеки, которая импортирует компоненты @rmwc . Эта библиотека использует @require("@rmwc/avatar/avatar.css") . Я импортирую import {Avatar} from "library/Avatar" и это не удается.

Понятно. Я думал, это импортировано прямо в ваше приложение. Виноват.

Судя по комментариям здесь, на самом деле это не решено или было решено, но многие люди здесь сообщают о другой проблеме. Многие люди до сих пор не могут импортировать модули, которые импортируют CSS из самого пакета (выражение import style.css внутри файла пакета).

Кажется, исправление позволяет приложению импортировать CSS из пути node_modules/ , но есть довольно простой способ обойти это: просто скопируйте CSS в свое приложение, пока он не будет исправлен. Это не проблема уровня блокировщика. Таким образом, это не решило проблему с блокировщиком, для которой нет простого решения. Если вы импортируете компонент, который имеет оператор импорта, в файл CSS, который содержит сам пакет, приложение вылетает.

@sasivarnan @OssiPesonen , похоже, вы оба говорите о другой проблеме, чем та, которая обсуждалась и исправлялась в этой проблеме OP.

Это, в частности, исправляет библиотеки, которые требуют, чтобы вы импортировали их CSS в свое приложение, например:

// components/MySlider.tsx
import { Slider } from "@reach/slider";
import "@reach/slider/styles.css";

function Example() {
  return <Slider min={0} max={200} step={10} />;
}

То, о чем вы говорите, - это дубликат # 706 и # 13282, или возможность обрабатывать node_modules как собственный код.

@Timer Я только что протестировал ожидаемый вариант использования, и он действительно работает нормально.

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

Возможно, что-то еще происходит, так как я даже не использую компонент Avatar в этом примере, я импортирую Button и все же Avatar - это ошибка сбоя.

Также я добавил next-transpile-modules поскольку мы работаем в монорепозитории, но это, похоже, не помогло в этой конкретной проблеме.

Я получил это с помощью странного конфигурационного файла, копавшегося в кучу других проблем около next-transpile-modules .

const withCSS = require("@zeit/next-css");
module.exports = withCSS();
require.extensions[".css"] = () => {
  return;
};

Я удалил next-transpile-modules и это работает. Понятия не имею, почему, похоже, ничего не должно делать?

Я заговорил слишком рано! Хотя это работает для next dev , next build не работает с ошибкой unknown token . (точка) из одного из файлов CSS.

@Timer Есть мысли? Должно ли это работать из коробки с монорепозиторием и несколькими пакетами? Или мне нужно что-то еще настроить, чтобы @ team / packageA могла импортировать css из node_modules, а затем импортировать в @ team / packageB?

Вы можете следовать https://github.com/vercel/next.js/issues/13282 для этого поведения.

Используя [email protected], можно импортировать css в любое место моего приложения. Но будет ли то же самое для файлов scss? Я хотел бы импортировать только те файлы scss, которые я действительно использую на странице .

// страницы / _app.tsx
import '../styles/common.scss'

// pages / index.tsx Я использую кнопку
import '@mynpm/custom-ui/_Button.scss'

// pages / about.tsx Я использую карусель
import '@mynpm/custom-ui/_Carousel.scss'

Пример на https://nextjs.org/docs/basic-features/built-in-css-support

Возвращает ошибку:
ошибка - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
Глобальный CSS нельзя импортировать из node_modules.
Подробнее: https://err.sh/next.js/css-npm

Пример на https://nextjs.org/docs/basic-features/built-in-css-support

Возвращает ошибку:
ошибка - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
Глобальный CSS нельзя импортировать из node_modules.
Подробнее: https://err.sh/next.js/css-npm

Убедитесь, что вы используете последнюю версию Next.js.

Извините, я не указал это в предыдущем комментарии. Я использовал версию 9.5.5. только что обновился с npm.

Я очистил весь кеш .next, и теперь он работает должным образом.

Ошибка все еще есть версия 9.5.5 , в _app -> import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css";