After successfully importing CSS/SCSS files into my React modules using Parcel, I encountered an issue when trying to import a CSS file from a node_modules package like bootstrap:
import * as styles from 'bootstrap/dist/css/bootstrap.css';
....
<div className= {`${styles.row}`}>A text</div> // This generates as <div class = "undefined">A text</div>
I'm wondering what might be missing here. Any ideas?
Here are my .postcssrc settings:
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
},
"postcss-modules": {
"camelCase": true
}
}
}
And my .babelrc configuration:
{
"presets": [
"@babel/preset-react",
"@babel/preset-env",
[
"@emotion/babel-preset-css-prop",
{
"sourceMap": false
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
Nothing out of the ordinary in my package.json, just the usual installed packages like parcel-plugin-typed-css-modules, autoprefixer, @types/autoprefixer, and postcss-modules.