gajus / gajus/babel-plugin-react-css-modules
Couldn't resolve some "scss" syntax such as this ?
- Langage dominant
- JavaScript
- Étoiles
- 2k
- Forks
- 159
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
``` 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)
```
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Commencez par le flux signalé à travers dist/index.js, dist/resolveStringLiteral.js et dist/getClassName.js, en utilisant l’exemple imbriqué de SCSS et JSX comme reproduction. Suivez pourquoi le nom généré chat-list__item n’est pas résolu, puis vérifiez que l’exemple se transforme sans l’erreur de CSS-module.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react, scss
- Domaine
- frontend, tooling
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100