Ich habe genau das gleiche Problem: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

Gleiches Problem auch hier: weinen:
Ich habe mein Problem hier beschrieben: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

Irgendein Fortschritt? Ich habe immer noch das gleiche Problem und kann es nicht in Produktion bringen.
Getestet auf 9.3.7-canary.9

@ EduardoPedrosa
Status: v9.3.7-canary.11 und das Problem besteht weiterhin.

Wir scheinen ein ähnliches Problem mit Komponenten aus einer gemeinsam genutzten Komponentenbibliothek in unserem Monorepo zu haben - alle Stile in unserer App, die diese Komponenten betreffen, werden von den Bibliotheksstilen überschrieben, obwohl die Spezifität der Stile in unseren App-CSS-Dateien gleich ist höher und sollte daher Vorrang haben. Im Dev-Modus sieht es gut aus, nur nicht in der Produktion :(

(Wir verwenden SCSS-Module mit @zeit/next-sass )

Als ich @ zeit / next-sass oder @ zeit / next-css verwendete, war alles in Ordnung mit Reihenfolge, Präferenz und Duplikaten zwischen Chuncks. :Denken:

Das eigentliche Problem für mich beginnt, als ich nextjs auf 9.3 aktualisiert und mit der Verwendung von CSS-Modulen begonnen habe.

Ich habe beide 2 Methoden ausprobiert (next-sass und integriert) - das Problem bestand in beiden Fällen

Mein Stapel:
1) CSS-Module
2) SCSS
3) Dart-Sass mit @ use Importen

Versuchte viele Variationen und diese funktioniert für mich (ohne Stilduplikate):

1) package.json:

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"next": "9.2.1", (9.4.1 is current)
"node-sass": "npm:[email protected]", (this is dart sass, but can be used default)

2) next.config.js

const path = require('path')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const withBundleAnalyzer = require('@next/bundle-analyzer')({ // Optional, of course
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(
  withCSS(
    withSass({
      cssModules: true,
      sassLoaderOptions: {
        // Resolving SASS absolute imports
        includePaths: [path.resolve(__dirname, 'src')],
      },
      cssLoaderOptions: {
        importLoaders: 2,
        localIdentName:
          process.env.NODE_ENV === 'production'
            ? '[hash:base64]'
            : '[name]__[local]__[hash:base64:5]',
      },
      webpack(config, options) {
        // Resolving absolute imports
        config.resolve.modules.push(path.join(__dirname, 'src'))

        // Make global styles work
        config.module.rules.forEach(rule => {
          if (rule.test && rule.test.toString().includes('.scss')) {
            rule.rules = rule.use.map(useRule => {
              if (typeof useRule === 'string') {
                return {
                  loader: useRule,
                }
              }

              if (useRule.loader.startsWith('css-loader')) {
                return {
                  oneOf: [
                    {
                      test: new RegExp('.module.scss$'),
                      loader: useRule.loader,
                      options: useRule.options,
                    },
                    {
                      loader: useRule.loader,
                      options: {},
                    },
                  ],
                }
              }
              return useRule
            })
            delete rule.use
          }
        })

        return config
      },
    }),
  ),
)

3) Importieren globaler (nicht modulierter) Stile wie folgt:

index.scss:

...
<strong i="19">@import</strong> '~emoji-mart/css/emoji-mart.css';
...

Es wird großartig sein, wenn jemand eine solche Konfiguration versucht, damit ich sicherstellen kann, dass dies wirklich funktioniert.

Ich schlage vor, dies zu ersetzen:

.other-page__component-override { background: pink; }

Mit diesem:

.other-page .component-override { background: pink; }

Die seitenspezifischen Stile gelten also nur für diese bestimmte Seite =).

Ich habe auch Probleme mit diesem Fehler.
Ich habe das nächste CSS in das integrierte CSS geändert und es ist passiert.
Es funktioniert im Entwicklungsmodus, aber nicht im Produktionsmodus, wenn CSR verwendet wird. In SSR gibt es kein Problem.

Ich verwende die nächste Version 9.4.4 mit integrierter CSS-Unterstützung und ich habe auch dieses Problem, es passiert in der Produktion.

Gleiches Problem am nächsten 9.4.4. Nur im Produktionsmodus

Dies passiert mit unserer Produktionsumgebung am nächsten 9.4.4, und irgendwie haben wir eine Lösung gefunden.

Bei der Verwendung von node-sass probieren wir verschiedene Optionen aus dem Dokument aus und lösen dies, indem wir next.config.js ein neues sassOptions hinzufügen

module.exports = {
  ...,
  sassOptions: {
    outputStyle: 'expanded',
  },
}

Referenz: outputStyle

Nachdem Sie den CSS-Klassennamen nach next build überprüft haben, scheint dies zu funktionieren.
Hoffe das hilft!

Vielen Dank für das Teilen von @ Howard86 , versucht, aber es hat hier nicht funktioniert. Wir verwenden next-css und next-sass auch für unsere Builds (nicht die integrierte CSS-Unterstützung von next und haben das gleiche Problem wie in dieser Ausgabe beschrieben), und die Duplizierung tritt in Klassen auf, die aus reinem CSS stammen, das als CSS importiert wurde. Module, die nicht aus Sass-Stilen stammen

@ Howard86 @ alexandre-marchina

Ich verwende integriertes CSS von next, next 9.4.4 und Ihre Lösung hat auch bei mir nicht funktioniert. :Schrei:

Ich habe das gleiche Problem mit Antd und dem nächsten neuesten 😞

gleicher Fehler . CSS laden perfekt in dev, aber im Produkt werden einige Teile von CSS nicht geladen

Gleiches Problem auch hier.

Ich habe die gleichen Probleme mit der nächsten Version 9.5.1 beim Prod Build erlebt. Beim Dev Build sind die Styles in Ordnung.

Dieser Fehler macht die Verwendung von CSS-Modulen in next.js unmöglich (weil niemand hinzufügen möchte! Wichtig in Stilen)

Dieser Fehler macht die Verwendung von CSS-Modulen in next.js unmöglich (weil niemand hinzufügen möchte! Wichtig in Stilen)

Sie können die Spezifität für die Stile erhöhen, die die Grundstile überschreiben. Nehmen wir zum Beispiel die Komponentenabhängigkeit als Button <- IconButton <- MoreSpecificButton an. In diesem Fall verfügt Button über eigene Stile, die beim Wechseln zu einer anderen Seite neu geladen werden und daher Stile von IconButton und MoreSpecificButton überschreiben. Wenn die Stile von IconButton als .className.className sind und MoreSpecificButton die Stile auch als .className.className wird sie von Button nicht überschrieben. Und da die Reihenfolge der Stile IconButton und MoreSpecificButton in CSS korrekt ist, überschreiben die Stile von MoreSpecificButton immer IconButton - erwartet.

Ich habe die gleichen Probleme mit der nächsten Version 9.5.1 beim Prod Build erlebt. Beim Dev Build sind die Styles in Ordnung.

Ich habe das gleiche Problem.

+1 mit Rückenwind, Bootstrap. Die aktuelle Problemumgehung besteht darin, alle Stile über den Link rel in die Datei _document.js zu importieren. Für Tailwind ist es ein benutzerdefinierter CSS-Build. Dieses Problem ist sehr ärgerlich.

Ich verwende CSS-Module mit Rückenwind (normaler globaler CSS-Import). Inlining CSS hat die Ladereihenfolge gelöst, aber ich weiß nicht, ob es immer noch dupliziert wird. Es ist nur eine Problemumgehung. In der Produktion habe ich keinen Stil bemerkt, der einen anderen überschreibt.

https://github.com/vercel/next-plugins/issues/238#issuecomment -432211871

Dies ist auf dem neuesten Kanarienvogel von Next.js behoben. Bitte aktualisieren Sie auf next@^9.5.3-canary.7 und lassen Sie es uns wissen!

Behebt es nicht für mich, zum Beispiel sind Zeilenhöhen, Schriftstärken, Hintergrundfarben und Ränder in dev und prod unterschiedlich.

@talaikis bitte eröffnen Sie eine neue Ausgabe mit einer vollständig reproduzierbaren Demo! Ich habe den genauen Code in dieser Reproduktion getestet und er funktioniert jetzt mit canary .

Fix für mich, aber es verursacht ein weiteres kritischeres Problem.
In meinem Fall, wenn ich nur die Hash-URL mit Router.push( localhost: 3000 ändere, ändern Sie ) coming from localhost: 3000 `Alle Stylesheets werden erneut geladen, wodurch der Bildschirm blinkt.

Können Sie bitte 9.5.3-canary.9 ausprobieren?

@Timer läuft npm i :

Ich hatte versucht, 9.5.3-canary.9 aber es ist immer noch Problem mit Hash.

Ich habe es nicht erwähnt, verwende aber 9.5.2 und wenn ich auf 9.5.3-canary.6 migriert bin, gibt es auch einen Fehler in der devtools-Konsole, wenn ich den Router verwende, um den Hash wie oben zu ändern.
Das Problem existiert nicht in 9.5.3-canary.5 .

@fabinppk bitte öffnen Sie eine neue Ausgabe mit einer Reproduktion!

Ich wollte nur bestätigen, dass das ursprüngliche Problem in 9.5.3-canary.9 behoben zu sein scheint. Vielen Dank, dass Sie @Timer

Vielen Dank für die Bestätigung von @petewarman!

@ Timer sicher. Ich denke, Ihr Fix ist in Ordnung und hängt nicht mit diesem Problem in devtools zusammen.
Vielen Dank. : +1:

Kann bestätigen, dass dies immer noch mit 9.5.6-canary.11 geschieht. Klassen werden über Chunks hinweg dupliziert.

@glottonous Alle in diesem Problem kommentierten Probleme wurden vom Timer gelöst.

Ps: Ich benutze 9.5.5. 👌👌

@fabinppk Ich kann bestätigen, dass das gleiche Problem ab 9.5.6-canary.11 immer noch auftritt .

@glottonous Ich habe einige Tests an meinem Projekt mit der Version 9.5.6-canary.11 und hatte keine Probleme.

Wenn Sie wirklich ein Problem haben, öffnen Sie ein neues Problem, indem Sie auf dieses verweisen. : +1:

in nextjs 10 die gleichen Ausgaben

Gleiche Probleme 10.0.1

Ich habe # 19055 mit einer reproduzierbaren Demo begonnen.