Closed
Description
Hello,
I have this in webpack.config.js:
...
// Styles
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
}
},
{ loader: 'resolve-url-loader' },
{ loader: 'postcss-loader' }
]
},
...
This in .babelrc:
...
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }],
["react-css-modules", { "generateScopedName": "[path]___[name]__[local]___[hash:base64:5]" }]
],
...
And this postcss.config.js:
module.exports = ctx => ({
parser: false,
map: ctx.env === 'development' ? 'inline' : false,
from: ctx.from,
to: ctx.to,
plugins: {
'postcss-cssnext': {},
doiuse: {
browsers: ['last 2 versions', '> 1%']
},
cssnano: ctx.env === 'production' ? {} : false
}
});
I can see the transformed classes in generated CSS but get CSS module cannot be resolved. error while running WebPack.
Should it work or is a new feature ?
As a quick hack I found this trick works:
.box {
display: flex;
}
.profile {
&__name {
color: red;
}
&__avatar {
&__image {
}
}
}
.profile__name {/* Only to define name in import */}
.profile__avatar {/* Only to define name in import */}
.profile__avatar__image {/* Only to define name in import */}