.scss 文件未找到流模块

Posted

技术标签:

【中文标题】.scss 文件未找到流模块【英文标题】:Flow module not found with .scss file 【发布时间】:2017-05-15 00:18:44 【问题描述】:

我有一个使用带有 css 模块的 scss 的文件,如下所示:

import styles from './Login.scss';

webpack 构建工作正常,但出现流程错误:Required Module Not Found

在我的 .flowconfig 我有

[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*

[include]

[libs]

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

我也见过https://github.com/facebook/flow/issues/338,但它并没有真正的解决方案。

有没有人找到解决这个问题的方法?

【问题讨论】:

【参考方案1】:

解决此错误的更好方法是使用css-modules-flow-types webpack 插件为您的 CSS 模块生成流类型。

Flow 不知道scss 扩展,因此您需要在.flowconfig[options] 部分添加以下内容:

; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss

您还应该将*.scss.flow 添加到您的.gitignore。这些文件不应签入,因为它们是在 webpack 构建期间自动生成的。

【讨论】:

【参考方案2】:

在 .flowconfig 文件中添加了我希望 flow 识别的所有文件类型

[options]    
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss

【讨论】:

【参考方案3】:

可以通过将 .scss 文件分配给空模块来修复此错误。我只是将 npm 安装为空并将其添加到 .flowconfig : module.name_mapper.extension='scss' -&gt; 'empty/object'

【讨论】:

但是没有扩展名的导入文件呢?【参考方案4】:

我们可以使用module.name_mapper.extension 替换Object 上导入模块的类型

module.name_mapper.extension - 指定要匹配的文件扩展名和替换模块名称, 用 -> 分隔。

将选项添加到.flowconfig 文件

// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'

创建新文件

// flowconfig.mock-module.js
export default Object;

【讨论】:

以上是关于.scss 文件未找到流模块的主要内容,如果未能解决你的问题,请参考以下文章

未找到 Laravel 引导文件

资产预编译期间未找到文件错误

Webpack - 在所有其他 scss 模块中自动包含配置 scss 文件

未找到入口模块中的错误 - 在 Webpack 配置文件中

python模块未找到错误没有模块命名

Webpack - scss/css 模块样式未在产品中应用