Using aliases with composes and babel-plugin-module-resolver does not works
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- babel, javascript, react
调研方向
先从 .babelrc 中的 module-resolver 配置和 compose 示例开始，然后检查 getTokens 和 fetch 处的 requireCssModule.js，以及 stack trace 中显示的 postcss-modules-parser 调用。重现 alias 和相对路径的情况，并确定 compose 解析是否应使用已配置的 alias；当 alias 情况能够在不出现 ENOENT 错误的情况下解析，且现有的相对导入继续正常工作时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
I'm trying to replace react-css-modules with this plugin. Most things work or have a simple solution, except for our use of aliases when composing classes. Previously we've used webpack and postcss-import to resolve the aliases, I don't expect that to work with a babel plugin.
@imports still work with aliases, even if I can't compose classes from a file loaded with @import. I can still do composes: button from '../button.css as long as the path is relative.
I've tried to set up the babel module-resolver by this comment https://github.com/gajus/babel-plugin-react-css-modules/issues/46#issuecomment-414130223
My config in .babelrc looks like this:
{
"presets": [
"@babel/preset-react"
],
"plugins": [
[
"module-resolver",
{
"root": [
"../apps"
],
"alias": {
"@constants": "../shared/constants",
"@shared": "../shared",
"@common": "./common",
}
}
],
["react-css-modules", {
"exclude": "node_modules",
"handleMissingStyleName": "warn",
"filetypes": {
".pcss": {
"syntax": ""
}
}
}],
],
If I compose a class like this:
.button {
composes: reset-button from '@common/styles/elements/button.css';
}
I get this error, as it tries to load the path as relative.
ERROR in ./src/app/components/Panel/Participants/Participant/Participant.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/[rootpath]/apps/src/app/components/Panel/Participants/Participant/@common/styles/elements/button.css'
at Object.openSync (fs.js:443:3)
at readFileSync (fs.js:343:35)
at getTokens (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:74:58)
at fetch (/[rootpath]/apps/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js:100:12)
at /[rootpath]/apps/node_modules/postcss-modules-parser/lib/index.js:74:20
Am I mistaken when I expect babel-plugin-react-css-modules to respect rules set with babel-plugin-module-resolver in compose statements?
- 主要语言
- JavaScript
- 星标
- 2k
- 派生
- 159
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
我们还没有检查这个项目的环境配置文件。先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
gajus/babel-plugin-react-css-modules 的其他 Issue
-
难度 3/5 1-2 天 新手友好度 35/100
-
难度 3/5 1-2 天 新手友好度 35/100
gajus/babel-plugin-react-css-modules#309 · 1 个 reaction ·
-
难度 3/5 1-2 天 新手友好度 35/100
-
难度 3/5 1-2 天 新手友好度 20/100
gajus/babel-plugin-react-css-modules#306 · 1 条评论 ·
-
难度 3/5 1-2 天 新手友好度 35/100
gajus/babel-plugin-react-css-modules#304 · 7 条评论 · 1 个 reaction ·
查看 gajus/babel-plugin-react-css-modules 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 90/100
维护者通常 1 天内回复
-
Design only Leadership Survey SLFS
难度 2/5 1-3 小时 新手友好度 70/100
bcgov/digital-journeys#2293 ·
-
难度 2/5 1-3 小时 新手友好度 72/100
tursodatabase/turso#9405 ·
维护者通常 1 天内回复
-
Toolkit
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
API Bug
难度 2/5 1-3 小时 新手友好度 78/100
ProjectSidewalk/SidewalkWebpage#5556 ·
维护者通常 1 天内回复