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

1
votes

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?

2
javascriptreactjswebpackpostcsscss-modules

2 Answers

0
votes

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.

0
votes

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>;
    }
}