流“必需模块未找到”导入CSS文件

问题描述:

当我尝试通过的WebPack(进口(./index.css))我得到这个错误导入CSS:流“必需模块未找到”导入CSS文件

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

我有一个像ComponentName→(index.js,index.css)这样的结构,以便每个组件都具有所有的依赖关系。

我试过this黑客,但它没有为我工作。我能不能忽略它?

添加到您的流程配置

[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.jsflow/stub/css-modules.js


虽然我们在它,如果你需要一些其他存根(如:为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-loader svg,png,jpg和gif。这将允许流量做出正确的模块替换(URL装载机返回一个字符串(一个base64或文件加载路径)。

例如,如果你做

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

流量将抛出一个错误。

+1

这是超级有用的,这将是巨大的,有这从官方文档引用。 – ctrlplusb

+0

如果'import' /'require'中没有提供文件扩展名,有没有办法处理这个问题? – Victor

+1

@ctrlplusb,这是现在在官方文档[这里](https://flow.org/en/docs/config/options/#toc-module-name-mapper-regex-string) – Victor

感谢@MoOx,这是伟大的!对的WebPack束装载机存根有什么建议?

我在想这样的事情...

module.name_mapper='^bundle?[a-zA-Z0-9$_]+$' -> '<PROJECT_ROOT>/flow/stubs/bundle-loader.js.flow' 

require('bundle?lazy&name=bundleName!path/to/file') 
+0

对不起,我不熟悉使用bundle-loader:/ – MoOx

+0

我为bundle-loader做的是:'module.name_mapper ='bundle。*?\!\(。* \)' - >'\ 1''。烦人的部分是,我们已经映射了其他别名,我可能不得不使用捆绑器添加另一个版本。 – kalley

为了不必声明每一个项目CSSModule,我已经发表了NPM包,这样做:

https://www.npmjs.com/package/css-module-flow

https://github.com/ckknight/css-module-flow