web-dev-qa-db-ja.com

CSSファイルのインポート時のフロー「必要なモジュールが見つかりません」

Webpack（import（./index.css））を介してCSSをインポートしようとすると、次のエラーが発生します。

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

ComponentName→（index.js、index.css）のような構造になっているので、各コンポーネントにはすべての依存関係があります。

this ハックを試しましたが、うまくいきませんでした。どういうわけか無視してもいいですか？

flowtype
29
Roman Makarov

これをフロー構成に追加します

[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は文字列（base64またはfile-loaderパス）を返します）。

例えばあなたがするなら

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

フローはエラーをスローします。

56
MoOx

すべてのプロジェクトでCSSModuleを宣言する必要がないようにするために、そうするnpmパッケージを公開しました。

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

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

1
ckknight

@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
Greg