私はまったく同じ問題を抱えています： https ：

ここでも同じ問題：cry：
私はここで私の問題を説明しました： https ：

何か進展はありますか？ 私はまだ同じ問題を抱えており、それを本番環境に入れることができません。
9.3.7-canary.9テスト済み

@EduardoPedrosa
ステータス：v9.3.7-canary.11で、問題は引き続き発生します。

モノリポジトリの共有コンポーネントライブラリのコンポーネントでも同様の問題が発生しているようです。アプリのCSSファイルのスタイルの特異性にもかかわらず、これらのコンポーネントに影響を与えるアプリのスタイルはライブラリスタイルによって上書きされます。より高いため、優先する必要があります。 開発モードでは問題なく見えますが、本番モードでは問題ありません:(

（ @zeit/next-sass SCSSモジュールを使用しています）

@ zeit / next-sassまたは@zeit / next-cssを使用していたときは、順序、設定、およびチャンク間の重複ですべてがかなり問題ありませんでした。 ：考え：

私にとっての本当の問題は、nextjsを9.3に更新し、cssモジュールを使い始めたときに始まります。

私は2つの方法（next-sassとbuilt-in）の両方を試しました-問題は両方の場合に存在しました

私のスタック：
1）CSSモジュール
2）SCSS
3） @useインポートを

多くのバリエーションを試しましたが、これは私にとってはうまくいきます（スタイルの重複はありません）：

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）次のようなグローバル（モジュールではない）スタイルのインポート：

index.scss：

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

誰かがそのような構成を試してみれば素晴らしいので、これが実際に機能することを確認できます。

これを置き換えることをお勧めします：

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

これとともに：

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

したがって、ページ固有のスタイルはその特定のページにのみ適用されます=）。

私もこのバグに問題があります。
next-cssを組み込みのcssに変更しましたが、それが起こりました。
開発モードでは動作しますが、CSRを使用した場合は本番モードでは動作しません。 SSRでは問題ありません。

私は組み込みのcssサポートを備えた次の9.4.4を使用していますが、この問題もあります。これは本番環境で発生します。

次の9.4.4でも同じ問題。 プロダクションモードのみ

これは次の9.4.4の本番環境で発生し、どういうわけか解決策を見つけました。

node-sassを使用する場合、ドキュメントからさまざまなオプションを試し、新しいsassOptionsをnext.config.js追加することでこれを解決します。

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

参照： outputStyle

next build後にcssクラス名を確認したところ、これは機能しているようです。
お役に立てれば！

@ Howard86を共有していただきありがとうございます。試してみましたが、ここでは機能しませんでした。 ビルドでもnext-cssとnext-sassを使用しており（nextからの組み込みCSSサポートではなく、この問題で説明されているのと同じ問題があります）、css-としてインポートされた純粋なcssからのクラスで重複が発生します。 sassスタイルに由来しないモジュール

@ Howard86 @ alexandre-marchina

私は次、次の9.4.4から組み込みのCSSを使用していますが、あなたのソリューションもうまくいきませんでした。 ：泣く：

私はantdと次の最新のもので同じ問題を抱えています😞

同じ問題。 cssは開発では完全にロードされますが、製品ではcssの一部のチャンクがロードされません

ここでも同じ問題。

次のv9.5.1でprodビルドで同じ問題が発生しましたが、devビルドではスタイルに問題はありません。

このバグにより、next.jsでcss-modulesを使用できなくなります（スタイルに！importantを追加したくないため）

このバグにより、next.jsでcss-modulesを使用できなくなります（スタイルに！importantを追加したくないため）

基本的なスタイルを上書きするスタイルの特異性を高めることができます。 たとえば、Button <-IconButton <-MoreSpecificButtonとしてコンポーネントの依存関係を設定しましょう。 この場合、Buttonには独自のスタイルがあり、別のページに切り替えると再読み込みされるため、IconButtonおよびMoreSpecificButtonのスタイルが上書きされます。 IconButtonのスタイルが.className.classNameとして定義されていて、MoreSpecificButtonのスタイルも.className.classNameとして定義されている場合、Buttonはそれをオーバーライドしません。 そして、CSSでIconButtonスタイルとMoreSpecificButtonスタイルの順序が正しいという事実があると、MoreSpecificButtonのスタイルは常にIconButtonをオーバーライドします-期待されます。

次のv9.5.1でprodビルドで同じ問題が発生しましたが、devビルドではスタイルに問題はありません。

同じ問題が発生しています。

Tailwind、Bootstrapで+1。 現在の回避策は、_document.jsのlinkrelを介してすべてのスタイルをインポートすることです。 Tailwindの場合、カスタムcssビルドです。 この問題は非常に厄介です。

私は追い風のあるcssモジュールを使用しています（通常のグローバルcssインポート）。 cssをインライン化すると、ロードの順序が解決されましたが、それでも重複しているかどうかはわかりません。これは単なる回避策です。 プロダクションでは、スタイルが別のスタイルを上書きしていることに気づきませんでした。

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

これは、最新のNext.jsカナリアで修正されています。 next@^9.5.3-canary.7アップグレードして、お知らせください。

例として、行の高さ、フォントの太さ、背景色、境界線はdevとprodで異なります。

@talaikisは、完全に再現可能なデモで新しい問題を開いてください！ 私はこの複製で与えられた正確なコードとcanary動作をテストしました。

私に修正しますが、それは別のより重大な問題を引き起こします。
私の場合、 Router.push( localhost：3000 /＃change ) coming from localhost：3000 `を使用してハッシュURLのみを変更すると、すべてのスタイルシートが再度リロードされ、画面が点滅します。

9.5.3-canary.9をお試しいただけますか？

@Timerがnpm iます：

9.5.3-canary.9試しましたが、それでもハッシュの問題が解決しません。

言及しませんでしたが、 9.5.2おり、 9.5.3-canary.6に移行すると、ルーターを使用して上記のようにハッシュを変更すると、devtoolsコンソールにもエラーが発生します。
問題は9.5.3-canary.5存在しません。

@fabinppk複製で新しい号を開いてください！

元の問題が9.5.3-canary.9で修正されていることを確認したかっただけです。 ありがとう@Timer

@petewarmanを確認していただきありがとうございます！

@タイマー確かに。 修正は問題なく、devtoolsのこの問題とは関係がないと思います。
ありがとうございました。 ：+1：

これが9.5.6-canary.11でまだ発生していることを確認できます。クラス

@glottonousこの問題でコメントされたすべての問題は、タイマーによって解決されました。

追伸：私は9.5.5を使用しています。 👌👌

@fabinppk 9.5.6-canary.11時点でも同じ問題が発生していることを確認できます。

@glottonousバージョン9.5.6-canary.11を使用してプロジェクトでいくつかのテストを行いましたが、問題はありませんでした。

本当に問題がある場合は、これを参照して新しい問題を開いてください。 ：+1：

nextjs 10では、同じ問題

同じ問題10.0.1

再現可能なデモで＃19055を開始しました。