Skip to content
This repository has been archived by the owner on Feb 13, 2023. It is now read-only.

CSS not loaded #69

Closed
kaspermarstal opened this issue Oct 8, 2017 · 8 comments
Closed

CSS not loaded #69

kaspermarstal opened this issue Oct 8, 2017 · 8 comments

Comments

@kaspermarstal
Copy link

kaspermarstal commented Oct 8, 2017 •
edited

The CSS is not loaded when using bloomer with next.js. Take a look at this example:

componentes/hero.js

import { ... , Hero, ... } from 'bloomer'
export default () => (
  <Hero isSize='medium'>
  ...
)

layouts/body.js

import Head from '../components/head'
import Header from '../components/header'
import Footer from '../components/footer'

export default ({ children }) =>
  <div>
    <Head/>
    <Header/>
    { children }
    <Footer/>
  </div>

pages/index.js

import Body from '../layouts/body'
import Hero from '../components/hero'
export default () =>
  <Body>
    <Hero/>
  </Body>

There are no errors in the dev console. The css from <style jsx global> in the Head component is loading properly, only the Bulma css is missing. I have installed bulma with npm. Loading manually with <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css" rel="stylesheet" />. Any idea what I am missing?

This is the components/head.js

import Head from 'next/head'
export default () =>
  <Head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
    <meta charSet="utf-8" />
    <style jsx global>{`
      body { 
        background: #000;
        color: #181b2b;
      }
  `}</style>
 </Head>
@AlgusDark
Copy link
Owner

AlgusDark commented Oct 8, 2017 via email •
edited

@kaspermarstal
Copy link
Author

Appreciate the quick response. How do I load Bulma with import? Could not find it in your otherwise excellent documentation. A naive approach like import 'bulma' or import 'bulma/css/bulma does not work.

@AlgusDark
Copy link
Owner

AlgusDark commented Oct 8, 2017 •
edited

Well... That's weird.

If you're using SASS, you can import modules like:

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

If not, import 'bulma/css/bulma' should work. Do you have an example nextjs repo where I can test this? I've never tried next but I can try now igual you help me with that :)

@kaspermarstal
Copy link
Author

Sure! Here it is: https://github.com/kaspermarstal/x-rai-website. Run npm install and npm run dev. The website is styled because of the link rel. You can remove this line and uncomment the import to see the error.

@AlgusDark
Copy link
Owner

Hey, this seems to be a configuration error.

You may need an appropriate loader to handle this file type

So, you need something for Next like css-modules.

Please check this thread.

Once that you have the correct loader, you're going to be able to import bulma css.

I'm going to close this issue since this is only a configuration problem with Next.js.

Please tell us if you found your solution :)

@kaspermarstal
Copy link
Author

Thanks will try that and let you know!

@sandalsoft
Copy link

For those having a similar issue with the CSS not rendering when using create-react-app, this is the import that fixed it for me:

import 'bulma/css/bulma.css';

Referenced here: jgthms/bulma#388 (comment)

@srikrsna
Copy link

srikrsna commented Jul 4, 2018

@kaspermarstal Could you get this to work?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kaspermarstal @AlgusDark @sandalsoft @srikrsna