Использование styled-jsx с post css, стили не перезагружаются / перестраиваются - PullRequest
Новая
       23

Использование styled-jsx с post css, стили не перезагружаются / перестраиваются

1 голос
/ 15 января 2020

Я использую сообщение css с styled-jsx. У меня есть несколько CSS файлов, которые я использую @import в _app.js. Это прекрасно работает, за исключением случаев, когда я вносю изменения в файлы CSS, Next. js не перестраивает приложение. Я вроде как, так как он, вероятно, не наблюдает за CSS файлами на предмет изменений. Однако я ничего не могу сделать, чтобы Next. js перестроил с изменениями. Я пытался изменить и сохранить _app.js. Я получаю восстановление, но изменения не включены. Я могу удалить папку .next, и это работает. Вот как выглядят мои включения: 

export default const App = ({Component, pageProps}) => {
  return (
    <>
      <Component {...pageProps} />

      <style jsx global>
        {`
          @import '@css/variables.css';
          @import '@css/mixins.css';
          @import '@css/reset.css';
          @import '@css/body.css';
          @import '@css/grid.css';
          @import '@css/form.css';
        `}
      </style>
    </>
  )
}

Есть идеи, что может пойти не так?

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Я решил эту проблему, выбрав другой маршрут; вероятно, лучшая практика в этой ситуации. Я опубликую свое решение на случай, если оно будет полезным.

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

  1. Далее. js автоматически ловит изменения и перестраивает.
  2. Sourcemaps работают лучше. Раньше, когда я нажимал на источник стиля в инструментах разработчика, он просто указывал на мое утверждение <style>@import.... Не полезно. РЕДАКТИРОВАТЬ: На самом деле, карта-источник, кажется, сломан для меня. Думаю, что-то связанное с post css и next- css не очень хорошо играет вместе.

В конце концов, это, вероятно, лучший способ сделать это. Тем не менее, я все еще хотел бы знать, есть ли разрешение, которое работает с тем, что я опубликовал изначально.

_app. js

@import 'path/to/global.css'

export default const App = ({Component, pageProps}) => {
  return (
    <Component {...pageProps} />
  )
};

Чтобы предупредить вопросы, есть больше к этому файлу, чем я показываю. На самом деле я просто включил его, чтобы показать разницу между моим исходным постом и решением.

global. css

@import '@css/variables.css';
@import '@css/mixins.css';
@import '@css/reset.css';
@import '@css/body.css';
@import '@css/grid.css';
@import '@css/form.css';

next.config. js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({})

ОБНОВЛЕНИЕ (26.01.20): Далее. js 9.2 теперь имеет встроенную поддержку для импорта CSS файлов. Таким образом, вы можете избавиться от вещей next-css. Плюс это исправляет исходные карты; так что это прекрасно работает.

0 голосов
/ 15 января 2020

добавить пустой стиль в _app. js вот так

import 'nameofyourfile. css'

...