Next-plugins: import './global.scss' has no effect in _document.js?

[AndrewRayCode]

Testing out Next.js, and trying to understand how to include a global stylesheet. I'm seeing some confusing behavior.

This is my next.config.js:

const withSass = require("@zeit/next-sass");
module.exports = withSass({
    cssModules: true
})

I have a global.scss file which simply changes the background color:

html, body {
  background: blue;
}

1. In my _document.js js, I've tried import './global.scss'; but there's no effect, even after a server restart
2. I can put import './global.scss'; in (any) page.js, but there's some confusing behavior:
   
   
   
   • If i visit page.js and then visit another page, the background stays blue
   
   
   • If I refresh on another page, the background goes away, but comes back when I revisit page.js
   
   
   • If I remove the line import './global.scss'; from my component, the background color does not go away (but if I change the scss, the background does live reload)
   
   

It's not ideal to add a "global" css import to every page. Is there a way to do once? Should it work in _document.js ? I'm thinking things like importing Bootstrap and other utilities, it's nice to have a global CSS file with those dependencies. It also fits well with my CSS mental model and development. A global style for styles that are truly global, and co-located scss for component styling

[JerryCauser]

The best way, what I found for myself – it's create a wrapper component (high-order component)

[AndrewRayCode]

@JerryCauser good idea, I already have a layout HOC, makes sense to add it there. (I'm not saying that resolves this issue, but a good workaround for me)

[eugeneross]

Having same issue @AndrewRayCode is experiencing. I want to use modular SASS when building components, but also have a global stylesheet that I can drop into _document.js but I'm unable to have both, just one or the other.

@JerryCauser Can you specify your workaround a little more? I'm not really seeing where the HOC docs are pointing to get around this.

@timneutkens Can you possibly chime in on when this might be a feature or can you recommend a proper workaround? Also, any reason why _document.js can't reload on save?

[timneutkens]

This might actually be fixed in latest canary, which I just released. Note that I haven't verified this whatshowever, but please try 😄

[eugeneross]

@timneutkens Yes, it seems like canary-4 fixed that issue. However, there are some weird behaviors that I will address in a new issue.

[timneutkens]

I’d have to check if it works in production though. I’m sure it works in development 👍🏻

[mv5]

importing css files in custom pages/_app.js file makes them globally available

[johanleroch]

importing css files in custom pages/_app.js file makes them globally available

It's SCSS file in that case but it works too ;)