Ich stehe vor dem gleichen Problem, indem ich einfach versuche, Linaria zu verwenden, das seine eigenen Klassennamen umfasst. Obwohl die erzeugten CSS-Dateien nicht auf .module.css enden, sind sie "Module". Ich benötige eine einfache Möglichkeit zur Integration in die Bibliothek.

warum bin ich überhaupt wieder zu nextjs gewechselt?

Ich möchte GlobalCSS auch außerhalb von node_modules verwenden können. Dies würde uns helfen, CSS-Module schrittweise einzuführen

ja das ist sehr wichtig! viele npm-Pakete funktionieren nicht mit nextjs, aber mit CRA oder anderen Frameworks

Für alle anderen, die versuchen, dies mit der js-Implementierung von Dart Sass für Dinge wie @use Unterstützung und Sass-Module zu verwenden, wenn Sie -irgendein- ein anderes Node-Modul haben, das eine Abhängigkeit von Node-Sass hat, das standardmäßige nächste Setup wird Node-Sass anstelle von Sass verwenden. Lokal habe ich es wie folgt behoben:

// 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');
            }
          }
        })
  }
}

Sie müssen dann Ihre scss-Dateien in _app.js importieren.

@smurrayatwork das ist hacken, nicht codieren, sorry

Auch die Einschränkung, dass es sich ausschließlich um _app.js handelt, ist etwas umständlich.

Wenn wir CSS-Referenzen nicht überall unterstützen, könnten wir es dann so gestalten, dass CSS auch durch direkte Abhängigkeiten von _app referenziert werden kann (die nirgendwo anders referenziert werden)?
dh. Es ist in Ordnung, wenn es von _app (und nirgendwo sonst) benötigt wird, was dem CSS eine deterministische Reihenfolge basierend auf Importen geben würde.

Es ist jedoch nicht ideal, aber der Anwendungsfall, den ich habe, ist, dass ich eine Codebasis habe, die von mehreren Anwendungen geteilt wird, die ein gemeinsam genutztes Modul importieren, das gemeinsam genutztes CSS importiert. Ich würde es hassen, diese gemeinsamen CSS-Importe in _app.js für jede Anwendung zu duplizieren. Um das zu umgehen, müsste ich derzeit etwas ausgefallene js-Metaprogrammierung durchführen, da wir in anderen Modulen kein CSS benötigen.

Stattdessen möchte ich meinen aktuellen Ansatz haben, nämlich eine "App Factory", die alle freigegebenen CSS importiert. _app verwendet dann die Factory und importiert sein eigenes CSS zusätzlich zu den freigegebenen.

Ich füge https://github.com/vercel/next.js/discussions/13991 hinzu, da ich denke, dass es sich auf dieses Problem bezieht.

+100 dazu. Ich muss Knotenmodul-CSS-Dateien kopieren und in mein Projekt einfügen und ihnen eine .module.css hinzufügen

Hier ist ein weiteres Beispiel.

Im Fall des Pakets pdf-viewer-reactjs erfordern die Abhängigkeiten CSS, die ebenfalls aus _app.js importiert werden müssen.

Dadurch wird das CSS für die gesamte App aufgebläht und ich bin mir zu diesem Zeitpunkt nicht sicher, ob es zu Konflikten kommt.

import 'react-quill/dist/quill.snow.css';
import 'react-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';

Zusätzlich wird folgendes an die Konsole ausgegeben:

warnen - ./node_modules/material-design-icons/iconfont/material-icons.css
Globales CSS kann nicht aus node_modules importiert werden.
Weiterlesen: https://err.sh/next.js/css-npm
Speicherort: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma/css/bulma.css
Globales CSS kann nicht aus node_modules importiert werden.
Weiterlesen: https://err.sh/next.js/css-npm
Speicherort: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/bulma-helpers/css/bulma-helpers.min.css
Globales CSS kann nicht aus node_modules importiert werden.
Weiterlesen: https://err.sh/next.js/css-npm
Speicherort: node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js

./node_modules/material-design-icons/iconfont/material-icons.css
Modul-Build fehlgeschlagen: Fehler: Final Loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) hat keinen Puffer oder String zurückgegeben

./node_modules/bulma/css/bulma.css
Modul-Build fehlgeschlagen: Fehler: Final Loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) hat keinen Puffer oder String zurückgegeben

./node_modules/bulma-helpers/css/bulma-helpers.min.css
Modul-Build fehlgeschlagen: Fehler: Final Loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) hat keinen Puffer oder String zurückgegeben

Hallo ! Hat das jemand gelöst und wie? So viele Knotenmodule, die ich deswegen nicht importieren kann.

Vielleicht könnte die Verwendung globaler Stile in Komponenten über next.config.js aktiviert werden, oder es könnte eine hässliche Konsolenwarnung vor globalen Stilen angezeigt werden, falls Bedenken bestehen, gegen die Best Practices / Meinungen von NextJS zu verstoßen.

Dies ist jedoch für Benutzer wichtig, die von CRA > NextJS konvertieren. Es ist ein Blocker für uns, da wir nicht wechseln und dann Dinge wie CSS-Module schrittweise übernehmen können.

Kann das immer noch nicht umgehen. Für meine eigenen Bedürfnisse habe ich einen benutzerdefinierten CSS-Handler verwendet, der jedoch die integrierte CSS-Unterstützung deaktiviert, aber möglicherweise nicht für alle Fälle eine gute Lösung ist. Vom Folgenden wird

next.config.js

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

@abdelrahmantoptal 's Wissen Sie, wie man das für SASS zum

Es scheint, dass es für CSS funktionieren würde, aber bei einem SASS-Import wird ein Fehler ausgegeben:

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 {

Also habe ich versucht

      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'
        ]
      });

Aber das verursachte:

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

Ich habe auch versucht, @zeit/next-sass ersetzen, aber das verursachte den gleichen Fehler:

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

Irgendwelche Vorschläge, wie Sie Ihren Code optimieren können, um SASS zu verwenden?

Jemand hat zufällig https://github.com/balena-io-modules/rendition erfolgreich implementiert?

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

Ich habe jetzt Gatsby und bald Next.js wegen ihrer kleinen, aber sehr blockierenden, rechthaberischen Funktionen wie diesem entfernt. Ich kann das CodeBlock Plugin für CKEditor 5 jetzt nicht verwenden, da ich diesen Fehler nicht umgehen kann. Es sollte immer eine Möglichkeit geben, diese Konfigurationen einzukreisen.

Es wäre sehr hilfreich, Neuigkeiten von @Timer oder jemandem von Vercel zu diesem Problem zu haben. Dies ist ein großes Problem mit Next.js. Ist etwas geplant, um dies zu beheben?

Einverstanden! Es ist unglaublich üblich, CSS in Knotenmodulen zu verwenden. Als Entwickler habe ich keine Kontrolle darüber, wie andere Entwickler ihre Node-Module strukturieren, und andere Entwickler erwarten nicht, dass das Einfügen von CSS in ein Node-Modul ein Web-Framework zerstören würde.

@OssiPesonen haben Sie gesehen , diese noch? Diese Problemumgehung ist nicht ideal, aber sie hat das Problem für mich zwischenzeitlich gelöst.

@OssiPesonen haben Sie gesehen , diese noch? Diese Problemumgehung ist nicht ideal, aber sie hat das Problem für mich zwischenzeitlich gelöst.

Ich verstehe nicht, wie das hilft? Das Problem ist nicht, dass ich einige CSS-Dateien aus Knotenmodulen manuell importieren muss. Das Problem besteht darin, dass npm-Pakete den CSS-Import selbst durchführen. Ein Paket, das eine Zeile wie diese enthält:

import '../theme/stylesheet.css'

Wird next.js mit aller Macht zum Absturz bringen. Und anscheinend ist der Rat des Betreuers:

Wenden Sie sich an den Betreuer und bitten Sie ihn, eine kompilierte Version seiner Abhängigkeit zu veröffentlichen.

In was für einem Fantasyland leben die Leute, in denen sie sich vorstellen, dass Sie sich einfach an die Betreuer wenden können, um sie zu bitten, ihr Paket für Sie in einem sehr schnellen Tempo neu zu kompilieren? Das wird jeden wochenlang behindern! Dieses Ticket ist seit 4 Monaten geöffnet. Das ist inakzeptabel, wenn Sie an schnell wechselnden Projekten arbeiten.

Wir werden den Import von CSS von node_modules in jede beliebige Komponentendatei innerhalb der nächsten Woche (auf Canary) zulassen! Wir werden hier posten, wenn es zum Testen bereit ist.

Wenn jemand dies vor der Veröffentlichung benötigt, konnte ich das Plugin next-transpile-modules verwenden, um das Modul von node_modules zu transpilieren, das CSS importierte. Hat bei mir wie ein Zauber gewirkt.

@BrandonE scheint, dass next-transpile-modules immer noch die Module mit dem Namen *.module.css . Haben Sie einen Weg gefunden, das zu umgehen?

@rjoaopereira Ich kann nicht sagen, dass ich ein tiefes Verständnis dafür habe, wie node_modules , die CSS importiert haben, funktionierten nur mit dem @zeit/next-css Plugin. Nur einer tat dies nicht, woraufhin das Transpilieren das Problem behob. Weit entfernt von einer eleganten Lösung, und ich hoffe, dass zukünftige Versionen von Next.js es uns ermöglichen, weniger Zeit mit der Babel / Webpack-Alchemie und mehr mit der Erstellung von Webanwendungen zu verbringen.

Mit den folgenden Änderungen habe ich das fast zum Laufen gebracht.

nächste 9.5.3
next-transpile-module 4.1.0
1st Party Komponenten mit Emotion.
Komponenten von Drittanbietern mit einer Mischung aus CSS-Modulen und globalem CSS

scopedcomponents soll durch die verwendeten Drittanbieterkomponenten ersetzt werden

//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;
    }
  });
};

Probleme:

• Ich habe kein SSR mehr im Dev-Modus. Produktion funktioniert.
• Ich habe immer noch CSS, das in der Produktion überschrieben wird, aber nicht in der Entwicklung, was die Motivation zum Entfernen von next-css war, wie in https://github.com/vercel/next.js/issues/11448 und https://github.com erwähnt /vercel/next.js/issues/10148

@Timer ein Update dazu?

Wir werden den Import von CSS von node_modules in jede beliebige Komponentendatei innerhalb der nächsten Woche (auf Canary) zulassen! Wir werden hier posten, wenn es zum Testen bereit ist.

Wird es nach diesem Fix einen dynamischen Import von CSS aus einer Komponente geben?

Vielen Dank @Timer

next@^9.5.4-canary.10 können Sie jetzt globales CSS von node_modules überall in Ihrer Anwendung importieren. Dies verbessert die Interoperabilität mit React-Bibliotheken von Drittanbietern, für die Sie CSS importieren müssen, aber nicht möchten, dass die Paketgröße für Ihre gesamte Anwendung erhöht wird.

@Timer Ich kann es kaum erwarten, diese Veröffentlichung zu haben, habe deine Arbeit wirklich geschätzt 💯️

Danke @Timer !

Dies war derzeit ein blockierendes Problem für mich, aber als ich es heute getestet habe, wird immer noch dieselbe Fehlermeldung angezeigt. Ist da noch etwas anderes, als einfach auf 9.5.4-canary-10 aufzurüsten? In diesem Beispiel wird versucht, die lib @rmwc von Drittanbietern zu verwenden

@johmike Importieren Sie mit der folgenden Syntax??

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

Haben Sie versucht, den Dev-Server nach der Installation der neuesten Version von next neu zu starten?

@Timer Vielen Dank für diese Funktion. Funktioniert hervorragend zum Importieren von CSS-Dateien aus dem Ordner node_modules .

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

Gibt es Pläne, den Import von globalem CSS außerhalb des node_modules Verzeichnisses zu unterstützen?

@sasivarnan
Dies kommt von einer anderen Bibliothek, die die @rmwc- Komponenten importiert. Diese Bibliothek verwendet @require("@rmwc/avatar/avatar.css") . Ich importiere import {Avatar} from "library/Avatar" und das schlägt fehl.

@sasivarnan

Dies kommt von einer anderen Bibliothek, die die @rmwc- Komponenten importiert. Diese Bibliothek verwendet @require("@rmwc/avatar/avatar.css") . Ich importiere import {Avatar} from "library/Avatar" und das schlägt fehl.

Habe es. Ich dachte, es wurde direkt in Ihre Anwendung importiert. Mein Fehler.

Den Kommentaren hier nach zu urteilen, ist dies tatsächlich nicht behoben oder es wurde behoben, aber viele Leute hier berichten von einem anderen Problem. Viele Leute können immer noch keine Module importieren, die CSS aus dem Paket selbst importieren (eine import style.css Anweisung in einer Paketdatei).

Der Fix scheint es der App zu ermöglichen, CSS aus dem node_modules/ Pfad zu importieren, aber es gibt eine ziemlich einfache Möglichkeit, dies zu umgehen: Kopieren Sie einfach das CSS vorerst in Ihre App, bis es behoben ist. Es ist kein Blocker-Level-Problem. Es hat also das Blockerproblem, für das es keine einfache Lösung gibt, nicht wirklich gelöst. Wenn Sie eine Komponente mit einer Importanweisung in eine CSS-Datei importieren, die das Paket selbst enthält, stürzt die App ab.

@sasivarnan @OssiPesonen Sie scheinen beide über ein anderes Problem zu sprechen als das, was in diesem OP-Problem besprochen und behoben wurde.

Dies behebt speziell Bibliotheken, die erfordern, dass Sie ihr CSS in Ihre Anwendung importieren, zum Beispiel:

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

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

Was Sie meinen, ist ein Duplikat von #706 und #13282 oder die Möglichkeit, node_modules wie Erstanbieter-Code zu behandeln.

@Timer Ich habe gerade den erwarteten Anwendungsfall getestet und er funktioniert tatsächlich

Wenn ich das CSS in eine Komponente direkt als Teil der nächsten Struktur importiere, funktioniert es wie erwartet, keine Fehler.
Wenn ich diese Komponente jedoch in ein anderes Paket außerhalb der nächsten Struktur verschiebe, dieses Paket baue und dann installiere, schlägt es auf denselben Fehler zurück wie zuvor.

Es ist möglich, dass etwas anderes passiert, da ich in diesem Beispiel nicht einmal die Komponente Avatar , ich importiere Button und dennoch ist Avatar der fehlgeschlagene Fehler.

Außerdem habe ich next-transpile-modules hinzugefügt, da wir von einem Monorepo aus arbeiten, aber das schien bei diesem speziellen Problem nicht zu helfen.

Ich habe dies durch eine seltsame Konfigurationsdatei zum Laufen gebracht, indem ich eine Reihe anderer Probleme rund um next-transpile-modules .

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

Ich habe next-transpile-modules eliminiert und das funktioniert. Ich habe keine Ahnung warum, es scheint, als ob es nichts tun sollte?

Ich habe zu früh gesprochen! Während das für next dev funktioniert, schlägt next build mit einem unknown token . (Punkt)-Fehler aus einer der CSS-Dateien fehl.

@Timer Irgendwelche Gedanken? Sollte dies mit einem Monorepo und mehreren Paketen sofort funktionieren? Oder muss ich noch etwas konfigurieren, damit @team/packageA CSS aus node_modules importieren und dann in @team/packageB importiert werden kann?

Sie können für dieses Verhalten https://github.com/vercel/next.js/issues/13282 folgen.

Mit [email protected] ist es möglich, CSS überall in meiner Anwendung zu importieren. Aber wird das auch für scss-Dateien möglich sein? Ich möchte nur die Scss-Dateien importieren, die ich tatsächlich auf einer Seite verwende .

// Seiten/_app.tsx
import '../styles/common.scss'

// Seiten/index.tsx Ich benutze einen Button
import '@mynpm/custom-ui/_Button.scss'

// Seiten/about.tsx Ich benutze ein Karussell
import '@mynpm/custom-ui/_Carousel.scss'

Das Beispiel unter https://nextjs.org/docs/basic-features/built-in-css-support

Gibt den Fehler zurück:
error - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
Globales CSS kann nicht aus node_modules importiert werden.
Weiterlesen: https://err.sh/next.js/css-npm

Das Beispiel unter https://nextjs.org/docs/basic-features/built-in-css-support

Gibt den Fehler zurück:
error - /Users/gp/dev/next-kolumbus/node_modules/@reach/dialog/styles.css
Globales CSS kann nicht aus node_modules importiert werden.
Weiterlesen: https://err.sh/next.js/css-npm

Stellen Sie sicher, dass Sie die neueste Version von Next.js verwenden.

Entschuldigung, ich habe es im vorherigen Kommentar nicht angegeben. Ich habe Version 9.5.5 verwendet. gerade von npm aktualisiert.

Ich habe den gesamten .next-Cache gelöscht und jetzt funktioniert es wie erwartet.

Der Fehler ist immer noch vorhanden Version 9.5.5 , in _app --> import "react-gauge-chart-nextjs-support/dist/GaugeChart/style.css";