更多

Question

我正在尝试在ReactJS组件中导入LESS类。

我正在使用react-autosuggest并且根据文档（对于JS），我应该这样做：

//file: myTheme.css

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

然后，在我的组件中导入它并使用如下：

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

问题是，TypeScript不允许我像这样导入css文件。它说：

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

另一个问题是我想使用Less来设置我的组件样式。我不知道该怎么做。

我该怎么做（如果不能用Less，CSS对我来说已经足够了）

Answer 1

我该怎么做

只需在文件globals.d.ts

中声明它即可

declare module "theme.css";

更多

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

Answer 2

我们对webpack使用typed-css-modules-loader。它由观察者产生d.ts类型。

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

添加到webpack.config，到规则部分（如果您使用的是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',
]}

有时TS编译器看不到新的输入，你需要等待或重新运行你的观察者。希望这有帮助

React和TypeScript - 如何导入Less

2 个答案:

更多