with-global-stylesheet-simple < multiple files

[andylacko]

hello, I am fighting with importing external css into next, its terrible that global stylesheets can not be written in scss 😕 Spent a lot of time trying to solve this. Finally after hours of fighting I decided to go with with-global-stylesheet-simple, but I have one problem, when I am trying to load multiple styles

      <style jsx global>{normalize}</style>
      <style jsx global>{reactSelect}</style>

it only takes first of them and the second is ignored also tried something like this <style jsx global>{normalize + reactSelect}</style> but it throws (shortened) Expected string but got BinaryExpression

any suggestions please? I really like next.js, hope they are working on proper support of including css into project, because working with external libraries without this option is real fight, I know I can evade this by using cdn styles, but it would be duplicity. I can also build devstack only for global stylesheets and then include it from the static folder, but it seems really stupid to me if I have one webpack running already

[lfades]

what do you mean by "but it would be duplicity" ?

[andylacko]

@goluis , because if I import the node module, why would I search css somewhere on cdns, that is the way I meant it

[pddigital]

This is a non-issue, you can use a Link tag to the static folder or copy and paste the styles into the global styles block. This is exactly how I've handled the issue. Takes me two seconds!! I've never had to import a stylesheet.

[andylacko]

@pddigital if you have more libraries, how do you join them and minify? Or you just insert a lot of different css files in row like it was done before 10 years?

plus why do I have to copy styles from node_modules into static folder and manage them myself..

[coox]

@andylaci —

Your issue of the with-global-stylesheet-simple example is actually a known limitation of styled-jsx.

Since you are already running webpack, I would suggest a potential solution: instead of using the babel-plugin-inline-import described in the example, have a look at styled-jsx-css-loader. This has been working really well for me in a similar setup.

[eashish93]

@andylaci. I just found a way to do this via existing solution. Just combine multiple global stylesheet like this:

// In _document.js or anywhere 
import globalStyle from './globalStyle.js';
<style jsx global>{globalStyle}</style>

File : globalStyle.js

import normalize from 'normalize/lib/style.css'
import bootstrap from 'bootstrap/dist/css/bootstrap.min.css';
import css from 'styled-jsx/css';

export default css`
${normalize}
${bootstrap}
/** Your own global style  **/
`

[sheerun]

Here's an example how to do it without CSS-in-JS: #3451

[mkozhukharenko]

I'm getting

StyleSheetRegistry: styleId: `jsx-undefined` not found.
Error: StyleSheetRegistry: styleId: `jsx-undefined` not found.

error in production mode (after building) after importing external css styles