导入 CSS 文件时出现“找不到所需模块”的流程

Question

当我尝试通过 webpack(import (./index.css)) 导入 CSS 时，出现此错误：

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

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

我尝试了 this hack，但它对我不起作用。我能以某种方式忽略它吗？

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。

如果您需要其他一些存根（例如：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 returns 字符串（base64 或文件加载器路径）。

例如，如果你这样做

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

Flow 会抛出错误。

Answer 2

谢谢@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')

Answer 3

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

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

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

导入 CSS 文件时出现“找不到所需模块”的流程

Flow “Required module not found” when importing a CSS file

flowtype