我如何在React组件中将postcss-bem与css-modules或postcss-js一起使用

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.

Answer 2

Thanks Andrey, Here's my solution : using the css-loader to hash and load css token into js file.

 //add these code into webpack.config.js module: { loaders: [ { test: /\\.css$/, loaders: [ 'style-loader', 'css-loader?' + 'modules&localIdentName=[name]_[local]_[hash:base64:3]', 'postcss-loader' ], } ] }, 

and in the JSX file, we can use import to load css token

 export default class Comp1 extends Component{ render () { const css = require( './style.css'); return <div className={css['Comp_name']}><Comp11 /></div>; } }