markdown FlowType和CSS模块

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown FlowType和CSS模块相关的知识,希望对你有一定的参考价值。

# Huh?

So basically [FlowType](http://flowtype.org) doesn't know about [CSS Modules](https://github.com/webpack/css-loader/#css-modules), a really handy way of dealing with the plagues of CSS in codebases (global variables and dependency wackiness mainly).

What WebPack allows us to do is "require" CSS files and use their class names:

```js
import styles from "my_styles.css";
import React from "react";

const MyComponent = React.createClass({
  render() {
    return <h1 className={styles.redHeader}>Hello!</h1>;
  }
});
```

Unfortunately, Flow will give us an error `Required module not found` because, well, let's be honest, importing CSS with JavaScript is pretty out of this world and a little bit crazy (i.e: [this](http://media0.giphy.com/media/NbgeJftsErO5q/giphy.gif)).

So here's what I did to fix that. Flow has a nice way of dealing with this in its options, namely one called `module.name_mapper`. Somebody was kind enough to make an npm module called `empty` that– you guessed it– returns empty objects and arrays. I'm pretty amazed to have found a use for this.

So as a fix, do this:
Run `npm install --save empty` in your project directory.

Open your `.flowconfig`, and add the following under `[options]`:
```
module.name_mapper='.*\(.css\)' -> 'empty/object'
```

Ta-da! Another fun day in JavaScript land.

以上是关于markdown FlowType和CSS模块的主要内容,如果未能解决你的问题,请参考以下文章

text Babel配置使Flowtype和Typescript迁移更容易

如何在nuxt中添加流(flowtype)支持?

markdown 12 - CSS模块

markdown 故事书与CSS模块

markdown CSS模块概述

使用 flowtype 静态检查 mocha 测试代码