导入CSS文件时"未找到所需模块"流程

Question

当我尝试通过webpack导入CSS(import(./index.css))时,我收到此错误:

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

我有一个类似ComponentName→(index.js,index.css)的结构,因此每个组件都包含所有依赖项.

我试过这个黑客,但它对我不起作用.我能以某种方式忽略它吗？

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'

如果你使用url-loadersvg,png,jpg和gif.这将允许Flow进行正确的模块替换(url-loader返回一个字符串(base64或文件加载器路径).

例如,如果你这样做

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

Flow会抛出错误.