use CSS in create-react-app style

[bghmarmalade]

Greetings, we have a react component that looks like this:

import React from 'react'
import './test.css'

export default function(props) {
  return <h1 className="test123">Testing!</h1>
}

A "create-react-app"-app understands this css import(css-loader in webpack probably). How can we make uiengine do the same?

[dennisreimann]

Hi, did you have a look at the React sample project, which uses CSS modules? https://github.com/dennisreimann/uiengine-sample-react/

Look at the uiengine.config.js and its configured Babel plugins in particular.

Does this help?

[bghmarmalade]

We did, but there you use next.js for the css handling and css modules. We want neither next.js nor css modules, just simple css loading.

[dennisreimann]

You‘ll need some kind of Babel plugin that makes sense of the CSS import. In case you do not need the transformed output of the import (i.e. for inline styles or className references) this can even be a simple no-op. This looks like it might solve your case: https://www.npmjs.com/package/babel-plugin-transform-import-css

[bghmarmalade]

Thanks, we looked at it, but will be trying out styled components for now.