import .css files from .tsx files does not work

[fend25]

SOLUTION:

Now typescript (v2.5) can't import non ts/js modules. There is a workaround for webpack: typings-for-css-modules-loader Here is the article with how-to: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

---

ORIGINAL ISSUE:

import .css files from .tsx files does not work. How to reproduce:

1. rename src/components/app.js to app.tsx
2. replace content of src/components/app.tsx with:

   
   import { h, Component } from 'preact';
   import style from './header/style.css'

export default class App extends Component<any, any> { render() { return (

abc

)

} }

then `npm run start` or `npm run build` will throw the error:

[at-loader] Checking finished with 1 errors [at-loader] ./src/components/app.tsx:2:19 TS2307: Cannot find module './header/style.css'. Build failed!

[variable-content]

I haven't been able to get this to work either - i've resorted to changing css imports to use this syntax: let style = require('./style.css');

[fend25]

@variable-content since preact-redux doesn't have typings at all, I am not able to use tsx files)

[developit]

@fend25 would love a PR to preact-redux if you want to add them - they should be identical to react-redux since it's just a proxy module

[cvuorinen]

Is there something preventing this PR from getting merged https://github.com/developit/preact-redux/pull/20? No point in creating competing PR's unless there's some reason to?

[fend25]

@developit could be the PR merged?

about the issue: Now typescript can't import non ts/js modules. There is a workaround for webpack: typings-for-css-modules-loader Here is the article with how-to: https://medium.com/@sapegin/css-modules-with-typescript-and-webpack-6b221ebe5f10

[cvuorinen]

FYI, there is also https://github.com/Quramy/typed-css-modules that can generate the CSS typings automatically.