gajus / gajus/babel-plugin-react-css-modules

Couldn't resolve some "scss" syntax such as this ?

Đang mở
#207 4 bình luận 2 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
2k
Fork
159
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

``` 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)
```

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Hướng nghiên cứu

Bắt đầu với luồng được báo cáo qua dist/index.js, dist/resolveStringLiteral.js và dist/getClassName.js, sử dụng ví dụ SCSS và JSX lồng nhau làm trường hợp tái hiện. Truy vết lý do tên được tạo chat-list__item không được phân giải, sau đó xác minh rằng ví dụ được chuyển đổi mà không gặp lỗi CSS-module.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react, scss
Lĩnh vực
frontend, tooling
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.