CSS module in Theia extension

Hi,

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.

or do const styles from require(’./welcome.module.css’) to skip ts check, but then you lose type-safety

do you use https://github.com/Jimdo/typings-for-css-modules-loader already? you will need a custom webpack config to enable it: https://github.com/eclipse-theia/theia/issues/766#issuecomment-341720642

[Hanksha]

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 src/browser folder?

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.

[Hanksha]

Ok thanks I will check that!

[Hanksha]

By the way when I checked the example widget extension generated via yo it has a css file index.css inside 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 browser-app using yarn start and I inspect the widget it seems that the css is not used or included.

[Soumesh Banerjee]

No its imported in the frontend-module.ts file, just like this theia markdown example

[Hanksha]

Yes you’re right but the style itself is not used since there is no h2 in the widget.