Question

当我尝试通过webpack导入CSS时（导入（./index.css））我收到此错误：

3: import './index.css';
          ^^^^^^^^^^^^^ ./index.css. Required module not found

我有一个类似ComponentName→（index.js，index.css）的结构，因此每个组件都包含所有依赖项。

我试过this黑客，但它对我没用。我能以某种方式忽略它吗？

Answer 1

将此添加到您的流配置

[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/CSSModuleStub.js'

并向根CSSModuleStub.js添加创建文件：

// @flow
type CSSModule = { [key: string]: string }
const emptyCSSModule: CSSModule = {}
export default emptyCSSModule

如果您想要干净路径，可以像这样调整

[options]
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'

因此将CSSModuleStub.js重命名为flow/stub/css-modules.js。

虽然我们在这里，如果你需要一些其他的存根（例如：for url-loader），这是另一个例子

创建flow/stub/url-loader.js

// @flow
const s: string = ""
export default s

并添加

module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'

如果您对svg，png，jpg和gif使用url-loader。这将允许Flow进行正确的模块替换（url-loader返回一个字符串（base64或文件加载器路径）。

例如，如果你这样做

import logoSVG from "./logo.png"
logoSVG.blah.stuff() // <-- flow will throw here

Flow会抛出错误。

Answer 2

为了不必为每个项目声明CSSModule，我已经发布了一个这样做的npm包：

Answer 3

谢谢@MoOx，这太棒了!!关于webpack bundle loader的存根的任何建议？

我在想这样的事情......