1

我正在使用带有 styled-jsx 的 postcss。我有一些我正在使用@import的CSS 文件_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>
    </>
  )
}

知道可能出了什么问题吗？

4

2 回答 2

0

I ended up resolving this by going a different route; probably the best-practice in this situation. I'll post my solution in case it's helpful.

I just used next-css (see update at the bottom of the post), and a javscript import to include the files. I'll post code below. I found a couple benefits to this way of doing it:

  1. Next.js automatically catches changes and rebuilds.
  2. Sourcemaps work better. Before, when I clicked on the source of a style in dev tools, it would just point me to my <style>@import... statement. Not helpful. EDIT: Actually, sourcemap seems to be broken for me. Something to do with postcss and next-css not playing well together, I think.

In the end, this is probably a better way to do it. Though, I'd still like to know if there's a resolution that works with what I posted originally.

_app.js

@import 'path/to/global.css'

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

To forestall questions, there is more to this file than I'm showing. Really just including it to show the difference between my original post and the solution.

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({})

UPDATE (01/26/20): Next.js 9.2 now has built-in support for importing CSS files. So you can get rid of the next-css stuff. Plus it fixes sourcemaps; so that works great.

于 2020-01-16T00:28:49.087 回答
0

像这样在 _app.js 中添加空样式

导入'nameofyourfile.css'

于 2020-01-15T10:19:26.483 回答