Глобальный CSS не работает при сборке Next.js с помощью Bazel

Я создаю приложение Next.js с помощью Базель. Работает нормально, но есть одна проблема:

Когда я импортирую styles/globals.css в pages/_app.tsx, Next.js выдает эту ошибку:

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx

Что, очевидно, не имеет смысла.

Размножение

  1. yarn install
  2. yarn start:bazel (http: // localhost: 3000, отлично работает)
  3. Теперь раскомментируйте строку это
  4. yarn start:bazel (Ошибка при сборке)

Редактировать 1

После предложения Ульрих Томас Габор выясняется, что ctx.customAppFile - это null, что может быть корнем проблемы.

Вот журнал вывода ctx при сборке с помощью Bazel:

{
  ctx: {
    rootDirectory: '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/85/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin',
    customAppFile: null,
    // ...
  }
}

Редактировать 2

После некоторой отладки я обнаружил проблему:

Этот если заявление не работает из-за этой ошибки

Error: EACCES: permission denied, access '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/186/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin/pages/_app.tsx'

Если я исправлю Next.js, чтобы игнорировать эту ошибку, все будет работать нормально! Но как предотвратить ошибку EACCES?

Вы читали предоставленная ссылка и последующая ссылка?

Ulrich Thomas Gabor 30.03.2021 11:03

Да, я импортирую только глобальные стили в pages/_app. И нет никаких проблем с CSS на уровне компонентов. Возможно, мне стоит упомянуть, что сборка изначально, при запуске next build работает нормально. Проблема возникает только при сборке под Bazel

Florian Ludewig 30.03.2021 12:13

Хм. Похоже, что что если не работает. Может быть, попробуйте отладить, если customAppFile передается правильно и каково его содержимое.

Ulrich Thomas Gabor 30.03.2021 14:09

Вы правы, ctx.customAppFile - это null. Теперь вопрос в том, почему

Florian Ludewig 30.03.2021 18:49

Кажется, установлена ​​переменная здесь. Может, ты сможешь узнать, что там происходит? Все, что передается в дальше вниз тогда, - это то, что вы должны увидеть в css/index.ts. Если все это кажется правильным (или неправильным - как бы это ни было видно), то следующим шагом будет продолжение пути в nodejs-правила, я думаю ..

Ulrich Thomas Gabor 30.03.2021 20:49

Я нашел проблему (см. Отредактированный ответ). Вы хоть представляете, почему это происходит?

Florian Ludewig 31.03.2021 10:19

Абсолютно без понятия. Я думаю, поскольку у вас есть минимальный (неработающий) пример и сообщение об ошибке, сейчас самое время открыть там проблему с Github.

Ulrich Thomas Gabor 31.03.2021 11:03
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
7
66
0

Другие вопросы по теме