babel-plugin-react-css-modules import is not work in less-loader - babel-plugin-react-css-modules

Question

i try use #import is not working。
// a.less
.hello{width:100px;height:100px;background:blue;}
// index.less
#import './a.less'
// App.jsx
import './index.less';
<div styleName="hello"></div>
ERROR:
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 (<anonymous>)
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
this is test demo : git#github.com:ganxunzou/react-redux-boilerplate.git
test setp:
clone git#github.com:ganxunzou/react-redux-boilerplate.git
git checkout css-module-less-postcss
npm i
npm run dev

Answer 1

try use #import is not working。
Mentioned error can be caused by different factors. Firstly, provided webpack.config does not include any loader for .less css-files, so ensure to add appropriate loader into config: https://github.com/webpack-contrib/less-loader
Secondly, styles can be wrapped in independent namespaces, which is useful to avoid collisions between components - so ensure, that generated scope is used property