Saya mengalami masalah yang persis sama: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

Masalah yang sama di sini juga: menangis:
Saya menjelaskan masalah saya di sini: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

Adakah peningkatan? Saya masih memiliki masalah yang sama dan saya tidak bisa memasukkannya ke dalam produksi.
Diuji pada 9.3.7-canary.9

@Eduardo_edrosa
Status: v9.3.7-canary.11 dan masalah masih berlanjut.

Kami tampaknya mengalami masalah yang sama dengan komponen dari pustaka komponen bersama di monorepo kami - gaya apa pun di aplikasi kami yang memengaruhi komponen tersebut diganti oleh gaya pustaka, terlepas dari kenyataan bahwa kekhususan gaya dalam file CSS aplikasi kami adalah lebih tinggi dan karena itu harus didahulukan. Ini terlihat bagus dalam mode pengembang, hanya saja tidak produksi :(

(Kami menggunakan modul SCSS dengan @zeit/next-sass )

Ketika saya menggunakan @ zeit / next-sass atau @ zeit / next-css semuanya baik-baik saja dengan urutan, preferensi dan duplikat antar potongan. :berpikir:

Masalah sebenarnya bagi saya dimulai ketika saya memperbarui nextjs ke 9.3 dan mulai menggunakan modul css.

Saya mencoba kedua metode 2 (next-sass dan built-in) - masalah ada di kedua kasus

Tumpukan Saya:
1) Modul CSS
2) SCSS
3) Dart-Sass dengan @use import

Mencoba banyak variasi dan yang ini bekerja untuk saya (tidak memiliki duplikat gaya):

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) Mengimpor gaya global (bukan modul) seperti ini:

index.scss:

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

Akan sangat bagus, jika seseorang mencoba konfigurasi seperti itu, jadi saya dapat memastikan ini benar-benar berfungsi.

Saya sarankan untuk mengganti ini:

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

Dengan ini:

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

Jadi gaya khusus halaman hanya berlaku di halaman tertentu =).

Saya juga mengalami masalah dengan bug ini.
Saya mengubah css berikutnya menjadi css bawaan dan itu terjadi.
Ia bekerja dalam mode pengembangan, tetapi tidak bekerja dalam mode produksi saat CSR digunakan. Di RSK, tidak ada masalah.

Saya menggunakan 9.4.4 berikutnya dengan dukungan css built-in dan saya memiliki masalah ini juga, itu terjadi dalam produksi.

Masalah yang sama di 9.4.4 berikutnya. Hanya dalam mode produksi

Ini terjadi pada env produksi kami pada 9.4.4 berikutnya, dan entah bagaimana kami menemukan solusi.

Seperti menggunakan node-sass , kami mencoba berbagai opsi dari dokumen, dan menyelesaikannya dengan menambahkan sassOptions ke next.config.js

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

Referensi: outputStyle

Setelah memeriksa nama kelas css setelah next build , ini sepertinya berhasil.
Semoga ini membantu!

Terima kasih telah berbagi @ Howard86 , sudah mencoba tetapi tidak berhasil di sini. Kami juga menggunakan next-css dan next-sass pada build kami (bukan dukungan CSS bawaan dari berikutnya, dan memiliki masalah yang sama yang dijelaskan dalam masalah ini), dan duplikasi terjadi di kelas yang berasal dari css murni yang diimpor sebagai css- modul, yang tidak berasal dari gaya sass

@ Howard86 @ alex-marina

Saya menggunakan CSS bawaan dari 9.4.4 berikutnya, selanjutnya 9.4.4 dan solusi Anda juga tidak berhasil bagi saya. :menangis:

Saya punya masalah yang sama dengan antd dan terbaru berikutnya 😞

masalah yang sama. css memuat sempurna di dev tetapi dalam produk beberapa potongan css tidak dimuat

Masalah yang sama di sini juga.

Mengalami masalah yang sama dengan v9.5.1 berikutnya pada build prod, pada build dev gayanya oke.

Bug ini membuat penggunaan css-modules di next.js tidak mungkin (karena tidak ada yang mau menambahkan! Penting dalam gaya)

Bug ini membuat penggunaan css-modules di next.js tidak mungkin (karena tidak ada yang mau menambahkan! Penting dalam gaya)

Anda dapat meningkatkan kekhususan untuk gaya yang menggantikan gaya dasar. Misalnya, mari kita memiliki ketergantungan komponen sebagai Button <- IconButton <- MoreSpecificButton. Dalam kasus ini, Button memiliki gayanya sendiri yang dimuat ulang saat beralih ke halaman lain dan oleh karena itu mengganti gaya dari IconButton dan MoreSpecificButton. Jika IconButton memiliki gayanya yang ditetapkan sebagai .className.className , dan MoreSpecificButton memiliki gayanya sebagai .className.className juga, maka Button tidak akan menimpanya. Dan memiliki fakta bahwa urutan gaya IconButton dan MoreSpecificButton benar di css gaya MoreSpecificButton akan selalu menggantikan IconButton - diharapkan.

Mengalami masalah yang sama dengan v9.5.1 berikutnya pada build prod, pada build dev gayanya oke.

Saya mengalami masalah yang sama.

+1 dengan Tailwind, Bootstrap. Solusi saat ini adalah mengimpor semua gaya melalui rel tautan di _document.js. Untuk Tailwind, ini adalah css build khusus. Masalah ini sangat mengganggu.

Saya menggunakan modul css dengan tailwind (impor css global normal). Inlining css menyelesaikan pengurutan beban, tetapi saya tidak tahu apakah itu masih menduplikasi, itu hanya solusi. Dalam produksi, saya tidak melihat ada gaya yang menggantikan gaya lain.

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

Ini diperbaiki pada kenari Next.js terbaru. Harap tingkatkan ke next@^9.5.3-canary.7 dan beri tahu kami!

Tidak memperbaikinya untuk saya, sebagai contoh, tinggi garis, ketebalan font, warna latar belakang, batas berbeda dalam dev dan prod.

@talaikis tolong buka edisi baru dengan demo yang sepenuhnya dapat direproduksi! Saya telah menguji kode persis yang diberikan dalam reproduksi ini dan bekerja pada canary sekarang.

Perbaiki untuk saya, tetapi itu menyebabkan masalah lain yang lebih kritis.
Dalam kasus saya ketika saya hanya mengubah url hash menggunakan Router.push( localhost: 3000 / # ubah ) coming from localhost: 3000 `semua stylesheet memuat ulang lagi menyebabkan layar berkedip.

Bisakah Anda mencoba 9.5.3-canary.9 ?

@Timer menjalankan npm i :

saya telah mencoba 9.5.3-canary.9 tetapi masih ada masalah dengan hash.

Saya tidak menyebutkannya, tetapi saya menggunakan 9.5.2 dan ketika saya bermigrasi ke 9.5.3-canary.6 juga ada kesalahan di konsol devtools ketika saya menggunakan router untuk mengubah hash seperti di atas.
Masalahnya tidak ada di 9.5.3-canary.5 .

@fabinppk tolong buka edisi baru dengan reproduksi!

Hanya ingin mengonfirmasi bahwa masalah asli tampaknya telah diperbaiki di 9.5.3-canary.9 . Terima kasih @Timer

Terima kasih telah mengonfirmasi @petewarman!

@Timer yakin. Saya pikir perbaikan Anda tidak apa-apa dan tidak terkait dengan masalah ini di devtools.
Terima kasih. : +1:

Dapat mengonfirmasi bahwa ini masih terjadi dengan 9.5.6-canary.11 , kelas diduplikasi di seluruh bagian.

@glottonous semua masalah berkomentar dalam masalah ini diselesaikan dengan timer.

Ps: Saya menggunakan 9.5.5. 👌👌

@fabinppk Saya dapat mengonfirmasi bahwa masalah yang sama masih terjadi pada 9.5.6-canary.11 .

@glottonous Saya melakukan beberapa tes pada proyek saya dengan versi 9.5.6-canary.11 dan saya tidak punya masalah.

Jika Anda benar-benar mengalami masalah, buka masalah baru dengan merujuk masalah ini. : +1:

di nextjs 10, masalah yang sama

Masalah yang sama 10.0.1

Saya telah memulai # 19055 dengan demo yang dapat direproduksi.