React和TypeScript-如何导入Less

Question

I'm trying to import LESS classes inside my ReactJS component.

I'm using react-autosuggest and according to documentation (for JS) i should do it like this:

//file: myTheme.css

.container { ... }
.input { ... }
.suggestionsContainer { ... }
.suggestion { ... }
.suggestionFocused { ... }

and then, in my component import it and use like this:

import theme from 'theme.css';
// ...
<Autosuggest theme={theme} ... />

The problem is, that TypeScript does not allow me to import css file like this. It says:

error TS2307: Cannot find module '../../../Stylesheets/AutosuggestStyles.css'

Another problem is that I would like to use Less for styling my components. I have no idea how should I do that.

How can I do that (if not able to do with Less, CSS is enough for me)

Answer 1

How can I do that

Just declare it in a file globals.d.ts

declare module "theme.css";

More

https://basarat.gitbooks.io/typescript/content/docs/types/ambient/intro.html

Answer 2

We use typed-css-modules-loader for webpack. It generates d.ts typings by watcher.

1. npm install less-loader style-loader css-loader typed-css-modules-loader --save-dev

2. Add to webpack.config, to rules section (if you're using Webpack 2)

    { test: /\\.less$/, include: jsDir, exclude: commonExcludePaths, use: [ 'style-loader', 'css-loader?modules&importLoaders=1&localIdentName=\\'[path][name]-[local]--[hash:base64:5]\\'', 'typed-css-modules-loader', ]} 

Sometimes TS compiler doesn't see new typings, you need wait or re-run your watcher. Hope this helps