Importing CSS from node_modules into JS modules results in "undefined" class name in generated html

Question

I'm using Parcel and I could successfully import CSS/SCSS files into my React modules:

import * as styles from './my-component.css';
....
<div className= {`${styles.glory}`}>A text</div> // Which will be generated as <div class = "_glory_c5yp0">A text</div>

What I'm not able to do is to do the same for a CSS file in a node_modules package, say bootstrap:

mport * as styles from 'bootstrap/dist/css/bootstrap.css';
....
<div className= {`${styles.row}`}>A text</div> // Which will be generated as <div class = "undefined">A text</div>

What's missing here?

---

My .postcssrc:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true,
    },
    "postcss-modules": {
      "camelCase": true
    }
  }
}

My .babelrc

{
  "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 fancy in package.json. Installed packages are parcel-plugin-typed-css-modules, autoprefixer, @types/autoprefixe, and postcss-modules

Answer 1

Found the solution here: https://parceljs.org/css.html#usage-with-existing-css-libraries and here: https://github.com/parcel-bundler/parcel/issues/3879#issuecomment-567196742.

In short, I needed to have a .postcssrc file in the directory:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}