流“必需模块未找到”导入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.js
至flow/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
流量将抛出一个错误。
答
感谢@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')
这是超级有用的,这将是巨大的,有这从官方文档引用。 – ctrlplusb
如果'import' /'require'中没有提供文件扩展名,有没有办法处理这个问题? – Victor
@ctrlplusb,这是现在在官方文档[这里](https://flow.org/en/docs/config/options/#toc-module-name-mapper-regex-string) – Victor