Поток "Требуемый модуль не найден" при импорте файла CSS

Когда я пытаюсь импортировать CSS через webpack (import (./index.css)), я получаю эту ошибку:

У меня есть структура типа ComponentName → (index.js, index.css), так что каждый компонент имеет все зависимости внутри.

Я пробовал этот взломать, но это не сработало для меня. Могу ли я как-то игнорировать его?

Ответы

Ответ 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'

если вы используете url-loader для svg, png, jpg и gif. Это позволит Flow выполнить правильную замену модуля (url-loader возвращает строку (base64 или файл-загрузчик).

Например, если вы делаете

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

Поток выдаст ошибку.

Ответ 2

Чтобы не объявлять CSSModule для каждого проекта, я опубликовал пакет npm, который делает это:

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

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

Ответ 3

Спасибо @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')