Open jesperjohansson opened 6 years ago
Im having the same problem on Webpack 3. This is how my .babelrc
looks like.
.babelrc
{
...
"plugins": [
...
["react-css-modules", {
"filetypes": {
".scss": {
"syntax": "postcss-scss",
"plugins": [
"postcss-at-rules-variables",
"postcss-each",
"postcss-nested"
]
}
},
"removeImport": true,
"webpackHotModuleReloading": true,
"generateScopedName": "[local]__[hash]"
}]
]
}
My project has SSR, which might be the problem.
Weird thing is when I console.log
the scss
file, it shows that I apparently have a class that I want to use but when I use styleName
in a component, I get the same error.
We have the same problem in a Next.js project
Any ideas how to fix this?
I get the same error
I have the same issue. Although I don't fully understand why, but this (https://github.com/postcss/postcss-nested#preserveempty) worked for me.
"plugins": [
[
"postcss-nested", {
"preserveEmpty": true
}
]
]
And the previous "lost" nested selector was NOT empty at all.
I think that it's related to https://github.com/postcss/postcss-scss/issues/90 so I suspect that postcss-scss
cannot handle things like .#{$breakpoint}-#{$i} {
.
@hinok postcss-scss
handles interpolation in selector. That issue is about much more complex cases (string in interpolation in string). Also, that issue should throw a syntax error. Here is a logical error, not parsing error.
i have the same issue with a sass generated grid system and webpack 4
Error: "Could not resolve the styleName 'aco-grid-col-12'."
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'babel-loader',
options: {
plugins: [
['react-css-modules', {
generateScopedName: '[name]-[local]',
filetypes: {
'.scss': {
syntax: 'postcss-scss',
},
},
}],
],
},
},
'eslint-loader',
],
},
$total-columns: 12;
@for $i from 1 through $total-columns {
$width: ($i * 100% / $total-columns);
.aco-grid-col-#{$i} {
flex-basis: $width;
max-width: $width;
@extend .aco-grid-col;
}
}
i have the same error and be blocked
+1 ,scss Interpolation is not working,but className
is work
$a: '.container__inner4';
.container {
color: red;
& > .test {
color: white;
@include ellipsis();
}
&__inner {
font-size: 30px;
}
}
#{$a} {
color: red;
}
import Style from './index.module.scss'
console.log(Style)
class AX2 extends React.Component {
render () {
const { message } = this.props
return (
<div styleName="container">
{message}
<span styleName="test container__inner" className={Style.container__inner4}>aaa</span>
</div>
)
}
}
I ran into this issue when using the classnames
module, and I solved it by storing the value in a variable and using it in styleName
property.
This worked:
const classes = classnames('edit-location', {
'edit-location--editing': isEditing,
});
...
<div styleName={classes}>...</div>
This didn't:
<div styleName={classnames('edit-location', {
'edit-location--editing': isEditing,
})}>...</div>
It's a manageable workaround until the transpiler gets fixed.
@jenshedqvist This issue is about a bit different problem.
In your case, use this code
<div styleName={classnames('edit-location', {
'edit-location--editing': isEditing,
})}>...</div>
and before starting dev server remove the .cache
folder
rm -rf ./node_modules/.cache
npm start # or however you start dev server
It should work.
It did @hinok
I ran into this issue when using the
classnames
module, and I solved it by storing the value in a variable and using it instyleName
property.This worked:
const classes = classnames('edit-location', { 'edit-location--editing': isEditing, }); ... <div styleName={classes}>...</div>
This didn't:
<div styleName={classnames('edit-location', { 'edit-location--editing': isEditing, })}>...</div>
It's a manageable workaround until the transpiler gets fixed.
I am using Gatsby v3 with babel-plugin-react-css-modules
.
My problem is that it not work after build, but works fine in dev.
I tried same way as you, however it still does not work.
I use the plugin postcss-scss together with sass-loader in Webpack 4. It works if the css class names are global and i use the normal
className
prop instead ofstyleName
. I import the .scss file at the top of my component.The error I get is:
Could not resolve the styleName 'tablet-6'.
SCSS code (Column.scss):
JS code (Column.js)