У меня точно такая же проблема: https://github.com/zeit/next.js/issues/11946#issuecomment -615298112

Такая же проблема и здесь: cry:
Я описал свою проблему здесь: https://github.com/zeit/next.js/pull/11901#issuecomment -614644961

Какой-либо прогресс? У меня все еще та же проблема, и я не могу запустить ее в производство.
Проверено на 9.3.7-canary.9

@EduardoPedrosa
Статус: v9.3.7-canary.11, и проблема все еще сохраняется.

Похоже, у нас аналогичная проблема с компонентами из общей библиотеки компонентов в нашем монорепозитории - любые стили в нашем приложении, которые влияют на эти компоненты, переопределяются стилями библиотеки, несмотря на то, что специфика стилей в файлах CSS нашего приложения является выше и поэтому должен иметь приоритет. В режиме разработки это выглядит нормально, только не в продакшене :(

(Мы используем модули SCSS с @zeit/next-sass )

Когда я использовал @ zeit / next-sass или @ zeit / next-css, все было в порядке с порядком, предпочтениями и дублированием между чанками. : мышление:

Настоящая проблема для меня начинается, когда я обновил nextjs до 9.3 и начал использовать модули css.

Я пробовал оба метода (next-sass и встроенный) - проблема существовала в обоих случаях

Мой стек:
1) Модули CSS
2) SCSS
3) Dart-Sass с импортом @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 проблем нет.

Я использую следующую версию 9.4.4 со встроенной поддержкой css, и у меня тоже есть эта проблема, это происходит на производстве.

Та же проблема в следующем 9.4.4. Только в производственном режиме

Это произойдет с нашей производственной средой в следующей версии 9.4.4, и каким-то образом мы нашли решение.

Как и при использовании node-sass , мы пробуем различные варианты из документа и решаем эту проблему, добавляя новый sassOptions в next.config.js

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

Ссылка: outputStyle

После проверки имени класса css после next build , похоже, это работает.
Надеюсь это поможет!

Спасибо, что поделились @ Howard86 , пробовали, но здесь не сработало. Мы также используем next-css и next-sass в наших сборках (не встроенная поддержка CSS из next и имеющая ту же проблему, описанную в этом выпуске), и дублирование происходит в классах, исходящих из чистого css, импортированного как css- модули, которые не относятся к стилям sass

@ Howard86 @ Александр Марчина

Я использую встроенный CSS из следующего, следующего 9.4.4, и ваше решение также мне не помогло. :плакать:

у меня такая же проблема с antd и следующей последней 😞

та же проблема. css загружается идеально в dev, но в продукте некоторые фрагменты css не загружаются

Та же проблема и здесь.

Испытывали те же проблемы со следующей версией v9.5.1 при сборке prod, при сборке dev стили в порядке.

Эта ошибка делает невозможным использование css-модулей в next.js (потому что никто не хочет добавлять! Important в стили)

Эта ошибка делает невозможным использование css-модулей в next.js (потому что никто не хочет добавлять! Important в стили)

Вы можете повысить специфичность стилей, которые переопределяют базовые стили. Например, давайте иметь зависимость компонентов как Button <- IconButton <- MoreSpecificButton. В этом случае Button имеет свои собственные стили, которые перезагружаются при переключении на другую страницу и поэтому переопределяют стили из IconButton и MoreSpecificButton. Если IconButton имеет свои стили, определенные как .className.className , а MoreSpecificButton также имеет свои стили как .className.className то Button не переопределит его. И учитывая тот факт, что порядок стилей IconButton и MoreSpecificButton правильный в css, стили MoreSpecificButton всегда будут переопределять IconButton - ожидалось.

Испытывали те же проблемы со следующей версией v9.5.1 при сборке prod, при сборке dev стили в порядке.

У меня такая же проблема.

+1 с попутным ветром, Bootstrap. Текущий обходной путь - импортировать все стили через ссылку rel в _document.js. Для Tailwind это кастомная сборка css. Эта проблема очень раздражает.

Я использую модули css с попутным ветром (обычный глобальный импорт css). Встраивание css решило порядок загрузки, но я не знаю, дублируется ли он по-прежнему, это просто обходной путь. В производстве я не заметил, чтобы один стиль перекрывал другой.

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

Это исправлено в последней версии Canary Next.js. Перейдите на next@^9.5.3-canary.7 и дайте нам знать!

Не исправляет для меня, например, высота строк, толщина шрифта, цвета фона, границы разные в dev и prod.

@talaikis, тогда пожалуйста, откройте новый выпуск с полностью воспроизводимой демонстрацией! Я протестировал точный код, приведенный в этом воспроизведении, и сейчас он работает с canary .

Исправьте меня, но это вызывает другую, более серьезную проблему.
В моем случае, когда я изменяю только URL-адрес хэша, используя Router.push( localhost: 3000 / # change ) coming from localhost: 3000 `, все таблицы стилей снова перезагружаются, вызывая мигание экрана.

Не могли бы вы попробовать 9.5.3-canary.9 ?

@ Таймер запущен 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: все проблемы,

Ps: я использую 9.5.5. 👌👌

@fabinppk Я могу подтвердить, что та же проблема все еще возникает с 9.5.6-canary.11 .

@glottonous Я провел несколько тестов в своем проекте с версией 9.5.6-canary.11 и у меня не было никаких проблем.

Если у вас действительно возникла проблема, откройте новую проблему, сославшись на эту. : +1:

в nextjs 10 такие же проблемы

Те же проблемы 10.0.1

Я начал # 19055 с воспроизводимой демонстрации.