I’d like to use a css module (https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) in one of my React widget. When I try to use
import styles from ‘./welcome.module.css’ in my widget it shows an error saying it cannot find the module.
When I use it in a plain React project it works, any idea how to do that for a Theia extension?
[original thread by Hanksha]
I suspect you need to generate d.ts file somehow for your css module.
const styles from require(’./welcome.module.css’) to skip ts check, but then you lose type-safety
No I’m not using that module loader so I don’t have any webpack config yet. What about adding regular css file as in https://create-react-app.dev/docs/adding-a-stylesheet. Does it include any css file I put in my
If css file is referenced then it is included.
Theia is bundled with webpack always for development or production mode, so you already have the wepback configu, but default one. Look for
webpack.config.js file. This file is generated so you cannot change it, but you can extend it with own and add custom loaders and plugins.
By default wepback uses imports and require statements to figure out what should be included in the final bundle, so you should make sure that css files should be reachable via requires from your extension entry point modules.
Ok thanks I will check that!
By the way when I checked the example widget extension generated via
yo it has a css file
src/browser/style and the style is used
test-widget-widget.tsx (but no import). When I build that extension using
yarn and then start the
yarn start and I inspect the widget it seems that the css is not used or included.
No its imported in the
frontend-module.ts file, just like this theia markdown example
Yes you’re right but the style itself is not used since there is no
h2 in the widget.