如何使用Typescript，React和Webpack导入CSS模块

如何使用Webpack在Typescript中导入CSS模块？如何使用Typescript，React和Webpack导入CSS模块

为CSS生成（或自动生成）.d.ts文件？并使用经典的Typescript import声明？随着./styles.css.d.ts：
```
import * as styles from './styles.css' 
```
导入使用require的WebPack功能？
```
let styles = require("./styles.css"); 
```

但最后的方法，我必须定义require功能。

什么是最好的方法或最佳选择，还可以处理CSS文件定义和类的IntelliSense？

2016-12-26 Diego Laciar

要么'import * as ...'样式或'import styles = require（...'是有效的，您可能必须为您的css文件声明模块 - 无论是显式还是泛型所有的css文件 - 作为typescript编译器将不知道它。[见这里]（https://github.com/css-modules/css-modules/issues/61）自动定义生成器。 –

可能的重复[在使用Webpack构建的Typescript中使用React组件中的CSS模块]（http://stackoverflow.com/questions/35014132/use-css-modules-in-react-components-with-typescript-built-by-webpack） – mixel

-4

let styles = require("./styles.css");是最好的接近，因为它是es5的JavaScript版本，它与每个反应的功能兼容。 import * as styles from './styles.css'是javascript的es6版本。

来源

2016-12-26 22:29:16 Codesingh

其中既不是es5也不是es6，它是打字稿，因此将被转录。 –

我同意@Meirion Hughes，感谢所有的回复！ –

或者使用需要的WebPack功能

这正是我用做，仍然在我的几个项目的代码在那里进口。

现在：我写了typestyle：http://typestyle.github.io/#/，但你不必使用它。只要坚持const styles = require('./styles.css')，如果它让你开心。 FWIW，你也可以使用原始的CSS与typestyle如果你想http://typestyle.github.io/#/raw

来源

2016-12-27 00:55:31 basarat

嗨Basarat <3，你的链接不工作。 –

A）正如你说的，有一个最简单的（不是最好的）选择使用要求：

const css = require('./component.css')

我们需要因为它不是打字稿中的标准功能，所以需要输入require。

最简单的打字要求可能是：然后

declare function require(name: string): string;

的WebPack将编译打字稿及使用的模块正确 - 但没有任何IDE帮助和类名检查构建。

B）有更好的解决方案使用标准进口：

import * as css from './component.css'

使全类名的IntelliSense
需要为每个CSS文件类型定义，否则tsc编译将失败

对于正确的智能感知，的WebPack需要为每一个CSS文件类型定义：

使用的WebPack typings-for-css-modules-loader

webpackConfig.module.loaders: [ 
    { test: /\.css$/, loader: 'typings-for-css-modules?modules' } 
    { test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' } 
];

装载机将产生在你的代码库*.css.d.ts文件中的每css文件
Typescript编译器将会理解，css导入将是模块，其中包含字符串类型的属性（类名称）。

提到typings-for-css-loader包含a bug因为类型的文件生成的延迟，最好在还没有产生我们*.css.d.ts文件的情况下宣布全球*.css类型。

这little bug场景：

创建CSS文件component.css
包括在组件import * as css from './component.css'
运行webpack
打字稿编译器将尝试编译代码（ERROR）
装载机将产生Css模块类型文件（component.css.d.ts），但是打印机编译器为了找到新的t ypings文件
运行webpack将再次修复生成错误。

简单的解决方法是导入CSS模块创建全局定义（如文件在源根称为typings.d.ts）：

declare module '*.css' { 
    interface IClassNames { 
    [className: string]: string 
    } 
    const classNames: IClassNames; 
    export = classNames; 
}

如果没有生成CSS文件，该定义将被使用（例如，你已经添加了新的css文件）。否则将使用生成的特定（需要位于同一文件夹中，并且与源文件相同的名称+ .d.ts扩展名），例如。 component.css.d.ts定义和智能感知将完美工作。

的component.css.d.ts例子：

export const wrapper: string; 
export const button: string; 
export const link: string;

如果你不希望看到生成的css分型，您可以在IDE设置过滤器隐藏在你的源代码与扩展.css.d.ts的所有文件。

来源

2017-05-28 14:30:52 Jurosh

如何使用Typescript，React和Webpack导入CSS模块

回答

相关问题