How could I use postcss-bem with css-modules or postcss-js in React component

Question

I am learning how to use postcss-bem to generate css files in bem style, but I wonder if there're some package like the CSS-Modules or Postcss-JS, that I could use to doing something like below:

const ReactComp extends React.Component{
  render(){
    let styles = './postcss-bem.css'
    return <div class={styles.blockname}>something</div>
  }
}

I found this feature on the documents of CSS-Modules and Postcss-JS but when I try to use webpack's postcss-loader with postcss-JS to parser the postcss-bem.css

loaders: ["style-loader","css-loader","postcss-loader?parser=postcss-js"]

But I got the error like this

Module build failed: SyntaxError: Unexpected token ILLEGAL

Am I doing it wrong?

Answer 1

postcss-js is a CSS-in-JS solution, so it works with CSS written in JS.

According file extention, you use CSS, not JS in postcss-bem.css.

Also there is no any sense to use postcss-bem plugin with CSS Modules. BEM allow you to isolate CSS by having prefix for every selector. But CSS Modules isolate CSS too. So you this two PostCSS tools do same thing.