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

@import is not work in Less

Ouverte
#145 0 commentaires 6 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
JavaScript
Étoiles
2k
Forks
159
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

this is my config.
// .babelrc
```
["react-css-modules",
{
"webpackHotModuleReloading":true,
"generateScopedName":"[name]__[local]--[hash:base64:5]",
"filetypes": {
".less": {
"syntax": "postcss-less"
}
}
}
],
```
// webpack.config.js
```
{
test: /\.less$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true, importLoaders: 2 ,localIdentName: '[name]__[local]--[hash:base64:5]'} },
'postcss-loader',
"less-loader",
]
},
```

if not use `@import` in less file,build is OK!!!

but if use `@import` in less file and use import less file selector,throw error:`Could not resolve the styleName 'hello'.`

How can I solve this problem?

The following is a test example of this problem:
```
git@github.com:ganxunzou/react-redux-boilerplate.git
git checkout css-module-less-postcss
npm i
npm run dev
```

For Full Error Message:
```
ERROR in ./src/App.jsx
Module build failed: Error: D:/workspace_js/react-redux-boilerplate/src/App.jsx: Could not resolve the styleName 'hello'.
at styleNameValue.split.filter.map.styleName (D:\workspace_js\react-redux-boilerplate\node_modules\babel-plugin-react-css-modules\dist\getClassNam
e.js:83:15)
at Array.map ()
at exports.default (D:\workspace_js\react-redux-boilerplate\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:66:6)
at exports.default (D:\workspace_js\react-redux-boilerplate\node_modules\babel-plugin-react-css-modules\dist\resolveStringLiteral.js:27:56)
at PluginPass.JSXElement (D:\workspace_js\react-redux-boilerplate\node_modules\babel-plugin-react-css-modules\dist\index.js:183:46)
at newFn (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\visitors.js:276:21)
at NodePath._call (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\path\context.js:76:18)
at NodePath.call (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\path\context.js:48:17)
at NodePath.visit (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\path\context.js:105:12)
at TraversalContext.visitQueue (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitMultiple (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\context.js:103:17)
at TraversalContext.visit (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\context.js:190:19)
at Function.traverse.node (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\index.js:114:17)
at NodePath.visit (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\path\context.js:115:19)
at TraversalContext.visitQueue (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (D:\workspace_js\react-redux-boilerplate\node_modules\babel-traverse\lib\context.js:108:19)
@ ./src/index.jsx 14:0-24 28:2-30:4 28:29-30:3
@ multi webpack-hot-middleware/client?reload=true react-hot-loader/patch webpack/hot/only-dev-server ./src/index.jsx
```

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Piste de recherche

Reproduisez le rapport de la branche css-module-less-postcss à l’aide des commandes et de la configuration indiquées dans .babelrc et webpack.config.js. Commencez par src/App.jsx et l’erreur de résolution de styleName signalée, puis suivez le comportement du plugin concerné. C’est terminé lorsque le fichier Less peut utiliser @import et que ses sélecteurs sont résolus sans l’erreur de build.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
babel, css, javascript, react, webpack
Domaine
build-system, frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.