gajus / gajus/babel-plugin-react-css-modules
Couldn't resolve some "scss" syntax such as this ?
- 主要言語
- JavaScript
- スター
- 2k
- フォーク
- 159
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
``` scss
:local
.chat-list{
background: red;
min-height: 200px;
&__item{
padding: 20px 30px;
background: lightcoral;
display: flex;
&-avatar{
width: 80px;
height: 80px;
background: lightgoldenrodyellow;
}
&-col-2{
flex: 1;
&-row-1{
display: flex;
}
}
}
}
```
use
``` jsx
import a from './style.scss'
console.log(a)
export default function Chats () {
return
{/*
}
```
and then
``` console
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: CSS module does not exist: chat-list__item
at getClassNameForNamespacedStyleName (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:47:13)
at styleNameValue.split.filter.map.styleName (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:68:14)
at Array.map ()
at exports.default (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:66:6)
at exports.default (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\resolveStringLiteral.js:23:56)
at PluginPass.JSXElement (D:\angle\task-mobile-web\node_modules\babel-plugin-react-css-modules\dist\index.js:193:48)
at newFn (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\visitors.js:193:21)
at NodePath._call (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (D:\angle\task-mobile-web\node_modules\@babel\traverse\lib\path\context.js:88:12)
```
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
dist/index.js、dist/resolveStringLiteral.js、dist/getClassName.js を通る報告されたフローから始め、ネストされた SCSS と JSX の例を再現として使用します。生成された名前 chat-list__item が解決されない理由を追跡し、その後、例が CSS-module エラーなしで変換されることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react, scss
- 領域
- frontend, tooling
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100