정확히 같은 문제가 있습니다 : https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

여기에도 같은 문제가 있습니다.
나는 여기에 내 문제를 설명했다 : https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

진전이 있습니까? 나는 여전히 똑같은 문제를 가지고 있으며 그것을 프로덕션에 넣을 수 없습니다.
9.3.7-canary.9 에서 테스트 됨

안녕하세요.
상태 : v9.3.7-canary.11 및 문제가 여전히 지속됩니다.

monorepo에있는 공유 구성 요소 라이브러리의 구성 요소와 비슷한 문제가있는 것 같습니다. 이러한 구성 요소에 영향을주는 앱의 모든 스타일은 앱 CSS 파일의 스타일의 특수성이 더 높으므로 우선해야합니다. 개발 모드에서는 괜찮아 보이지만 프로덕션이 아닙니다.

(우리는 @zeit/next-sass 와 함께 SCSS 모듈을 사용하고 있습니다)

@ zeit / next-sass 또는 @ zeit / next-css를 사용할 때 모든 것이 순서, 선호도 및 덩어리 사이의 중복으로 꽤 괜찮 았습니다. :생각:

나에게 진짜 문제는 nextjs를 9.3으로 업데이트하고 CSS 모듈을 사용하기 시작했을 때 시작됩니다.

나는 두 가지 방법 (next-sass 및 built-in)을 모두 시도했습니다. 두 경우 모두 문제가 발생했습니다.

내 스택 :
1) CSS 모듈
2) SCSS
3) @use 가져 오기 기능이있는 Dart-Sass

많은 변형을 시도했고 이것은 나를 위해 작동합니다 (스타일 중복 없음).

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

따라서 페이지 별 스타일은 해당 특정 페이지에만 적용됩니다 =).

이 버그에도 문제가 있습니다.
다음 css를 내장 css로 변경했는데 발생했습니다.
개발 모드에서는 작동하지만 CSR을 사용하는 경우 프로덕션 모드에서는 작동하지 않습니다. SSR에서는 문제가 없습니다.

나는 내장 CSS 지원과 함께 다음 9.4.4를 사용하고 나도이 문제가 있으며 프로덕션에서 발생합니다.

다음 9.4.4에서 동일한 문제. 프로덕션 모드에서만

이것은 다음 9.4.4의 프로덕션 환경에서 발생하며 어떻게 든 해결책을 찾았습니다.

node-sass 를 사용하여 문서에서 다양한 옵션을 시도하고 next.config.js 새 sassOptions 를 추가하여이 문제를 해결합니다.

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

참조 : outputStyle

next build 후 CSS 클래스 이름을 확인한 후 작동하는 것 같습니다.
도움이 되었기를 바랍니다!

@ Howard86 을 공유해 주셔서 감사합니다. 시도했지만 여기서는 작동하지 않았습니다. 우리는 빌드에서도 next-css와 next-sass를 사용하고 있습니다 (Next의 내장 CSS 지원이 아니며이 문제에 설명 된 동일한 문제가 있음). 복제는 css로 가져온 순수 CSS에서 오는 클래스에서 발생합니다. sass 스타일에서 오지 않는 모듈

@ Howard86 @ 알렉산드르-marchina

나는 다음 9.4.4에서 내장 CSS를 사용하고 있으며 귀하의 솔루션도 나에게 효과가 없습니다. :울음 소리:

나는 antd와 다음 최신 😞과 같은 문제가 있습니다.

같은 문제. css는 dev에서 완벽하게로드되지만 제품에서는 일부 css 청크가로드되지 않습니다.

여기에서도 같은 문제입니다.

prod 빌드에서 다음 v9.5.1에서 동일한 문제를 경험했으며 dev 빌드에서 스타일은 괜찮습니다.

이 버그는 next.js에서 css-modules를 사용하는 것을 불가능하게 만듭니다 (아무도 스타일에! important를 추가하고 싶어하지 않기 때문입니다)

이 버그는 next.js에서 css-modules를 사용하는 것을 불가능하게 만듭니다 (아무도 스타일에! important를 추가하고 싶어하지 않기 때문입니다)

기본 스타일을 재정의하는 스타일에 대한 특수성을 높일 수 있습니다. 예를 들어, Button <-IconButton <-MoreSpecificButton과 같은 구성 요소 종속성을 갖습니다. 이 경우 Button에는 다른 페이지로 전환 할 때 다시로드되는 자체 스타일이 있으므로 IconButton 및 MoreSpecificButton의 스타일을 재정의합니다. IconButton과 같이 정의의 스타일이있는 경우 .className.className , 그리고 MoreSpecificButton는 등의 스타일이 .className.className 너무 다음 버튼을 오버라이드 (override)하지 않습니다. 그리고 IconButton 및 MoreSpecificButton 스타일의 순서가 CSS에서 정확하다는 사실을 알고 있으면 MoreSpecificButton의 스타일은 항상 IconButton을 재정의합니다.

prod 빌드에서 다음 v9.5.1에서 동일한 문제를 경험했으며 dev 빌드에서 스타일은 괜찮습니다.

동일한 문제가 발생합니다.

Tailwind, Bootstrap에 +1. 현재 해결 방법은 _document.js의 link rel을 통해 모든 스타일을 가져 오는 것입니다. Tailwind의 경우 사용자 지정 CSS 빌드입니다. 이 문제는 매우 성가시다.

나는 tailwind (일반 전역 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을 확인해 주셔서 감사합니다!

@Timer 확실합니다. 나는 당신의 수정이 괜찮고 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를 시작했습니다.