J'ai exactement le même problème: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

Même problème ici aussi: pleurer:
J'ai décrit mon problème ici: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

Aucun progrès? J'ai toujours le même problème et je ne peux pas le mettre en production.
Testé sur 9.3.7-canary.9

@EduardoPedrosa
Statut: v9.3.7-canary.11 et le problème persiste.

Nous semblons avoir un problème similaire avec les composants d'une bibliothèque de composants partagés dans notre monorepo - tous les styles de notre application qui affectent ces composants sont remplacés par les styles de bibliothèque, malgré le fait que la spécificité des styles dans les fichiers CSS de notre application est plus élevé et devrait donc avoir la priorité. Cela a l'air bien en mode dev, mais pas en production :(

(Nous utilisons des modules SCSS avec @zeit/next-sass )

Quand j'utilisais @ zeit / next-sass ou @ zeit / next-css, tout allait assez bien avec l'ordre, les préférences et les doublons entre les morceaux. :en pensant:

Le vrai problème pour moi commence lorsque j'ai mis à jour nextjs vers la version 9.3 et commencé à utiliser des modules css.

J'ai essayé les deux méthodes (next-sass et built-in) - le problème existait dans les deux cas

Ma pile:
1) Modules CSS
2) SCSS
3) Dart-Sass avec les importations @use

J'ai essayé beaucoup de variations et celle-ci fonctionne pour moi (n'ayant pas de doublons de styles):

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) Importation de styles globaux (pas de modules) comme ceci:

index.scss:

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

Ce sera super, si quelqu'un essaie une telle configuration, donc je peux m'assurer que cela fonctionne vraiment.

Je suggère de remplacer ceci:

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

Avec ça:

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

Ainsi, les styles spécifiques à la page s'appliquent uniquement à cette page spécifique =).

J'ai aussi des problèmes avec ce bug.
J'ai changé le next-css en css intégré et c'est arrivé.
Cela fonctionne en mode développement, mais cela ne fonctionne pas en mode production lorsque CSR est utilisé. En SSR, il n'y a pas de problème.

J'utilise la prochaine 9.4.4 avec le support css intégré et j'ai aussi ce problème, cela se produit en production.

Même problème sur le prochain 9.4.4. Uniquement en mode production

Cela arrive à notre environnement de production sur la prochaine 9.4.4, et nous avons trouvé une solution.

En utilisant node-sass , nous essayons diverses options du doc, et résolvons cela en ajoutant un nouveau sassOptions à next.config.js

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

Référence: outputStyle

Après avoir vérifié le nom de classe css après next build , cela semble fonctionner.
J'espère que cela t'aides!

Merci d'avoir partagé @ Howard86 , essayé mais cela n'a pas fonctionné ici. Nous utilisons également next-css et next-sass sur nos builds (pas le support CSS intégré de next, et ayant le même problème décrit dans ce numéro), et la duplication se produit dans les classes provenant de pure css importée en tant que css- modules, qui ne proviennent pas de styles sass

@ Howard86 @ alexandre-marchina

J'utilise le CSS intégré du prochain, le 9.4.4 suivant et votre solution n'a pas non plus fonctionné pour moi. :pleurer:

J'ai le même problème avec antd et la prochaine dernière 😞

même problème . chargement css parfait en dev mais dans le produit certains morceaux de css ne se chargent pas

Même problème ici aussi.

J'ai rencontré les mêmes problèmes avec la prochaine version v9.5.1 sur la version prod, sur la version dev, les styles sont corrects.

Ce bogue rend impossible l'utilisation de modules css dans next.js (car personne ne veut ajouter! Important dans les styles)

Ce bogue rend impossible l'utilisation de modules css dans next.js (car personne ne veut ajouter! Important dans les styles)

Vous pouvez augmenter la spécificité des styles qui remplacent les styles de base. Par exemple, ayons la dépendance des composants comme Button <- IconButton <- MoreSpecificButton. Dans ce cas, Button a ses propres styles qui sont rechargés lors du passage à une autre page et remplace donc les styles de IconButton et MoreSpecificButton. Si IconButton a ses styles définis comme .className.className , et MoreSpecificButton a ses styles comme .className.className alors Button ne le remplacera pas. Et étant donné que l'ordre des styles IconButton et MoreSpecificButton est correct en css, les styles de MoreSpecificButton remplaceront toujours IconButton - attendu.

J'ai rencontré les mêmes problèmes avec la prochaine version v9.5.1 sur la version prod, sur la version dev, les styles sont corrects.

Je rencontre le même problème.

+1 avec Tailwind, Bootstrap. La solution de contournement actuelle consiste à importer tous les styles via le lien rel dans le _document.js. Pour Tailwind, il s'agit d'une version css personnalisée. Ce problème est très ennuyeux.

J'utilise des modules css avec tailwind (importation css globale normale). L'inlining css a résolu l'ordre de chargement, mais je ne sais pas s'il est toujours en train de se dupliquer, c'est juste une solution de contournement. En production, je n'ai pas remarqué qu'un style prenait le dessus sur un autre.

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

Ce problème est résolu sur le dernier canari Next.js. Veuillez passer à next@^9.5.3-canary.7 et faites-le nous savoir!

Cela ne résout pas le problème pour moi, par exemple, les hauteurs de ligne, les épaisseurs de police, les couleurs d'arrière-plan, les bordures sont différentes en développement et en production.

@talaikis veuillez ouvrir un nouveau numéro avec une démo entièrement reproductible alors! J'ai testé le code exact donné dans cette reproduction et son fonctionnement sur canary maintenant.

Corrigez-moi, mais cela pose un autre problème plus critique.
Dans mon cas, lorsque je change uniquement l'URL de hachage en utilisant Router.push( localhost: 3000 / # change ) coming from localhost: 3000 `toutes les feuilles de style se rechargent à nouveau, ce qui fait clignoter l'écran.

Pouvez-vous essayer 9.5.3-canary.9 ?

@Timer exécutant npm i :

J'avais essayé 9.5.3-canary.9 mais son problème persiste avec le hachage.

Je ne l'ai pas mentionné, mais j'utilise 9.5.2 et lorsque j'ai migré vers 9.5.3-canary.6 il y a aussi une erreur dans la console devtools lorsque j'utilise le routeur pour changer le hachage comme ci-dessus.
Le problème n'existe pas dans 9.5.3-canary.5 .

@fabinppk veuillez ouvrir un nouveau numéro avec une reproduction!

Je voulais juste confirmer que le problème d'origine semble être résolu dans 9.5.3-canary.9 . Merci @Timer

Merci d'avoir confirmé @petewarman!

@Timer bien sûr. Je pense que votre solution est correcte et n'est pas liée à ce problème dans devtools.
Je vous remercie. : +1:

Peut confirmer que cela se produit toujours avec 9.5.6-canary.11 , les classes sont dupliquées entre les blocs.

@glottonous tous les problèmes commentés dans ce problème ont été résolus par le minuteur.

Ps: j'utilise 9.5.5. 👌👌

@fabinppk Je peux confirmer que le même problème se produit toujours à partir de 9.5.6-canary.11 .

@glottonous J'ai fait quelques tests sur mon projet avec la version 9.5.6-canary.11 et je n'ai eu aucun problème.

Si vous rencontrez vraiment un problème, ouvrez un nouveau problème en référençant celui-ci. : +1:

dans nextjs 10, mêmes problèmes

Mêmes problèmes 10.0.1

J'ai commencé # 19055 avec une démo reproductible.