如何将postcss-bem与css-模块或postcss-js一起使用在React组件中？

Question

我正在学习如何使用postcss-bem生成bem样式的css文件，但我想知道是否有类似CSS-Modules或Postcss-JS之类的包可以用于执行以下操作：

​

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

​

我在CSS-Modules和Postcss-JS的文档中找到了这个特性，但是当我尝试使用webpack的postcss-加载器和postcss-JS一起解析postcss-bem.css时，我发现了这个特性。

加载器：“样式-加载器”、“css-加载程序”、“后置加载器?解析器=postcss-js”。

但我犯了这样的错误

模块构建失败: SyntaxError:意外令牌非法

我做错了吗？

Answer 1

postcss-js是一种CSS在JS中的解决方案，因此它与用JS编写的CSS一起工作。

根据文件扩展，在postcss-bem.css中使用的是CSS，而不是JS。

此外，没有任何意义，使用后CSS -bem插件与CSS模块。BEM允许您通过为每个选择器设置前缀来隔离CSS。但是CSS模块也隔离了CSS。所以，这两个PostCSS工具做的事情是一样的。

Answer 2

谢谢Andrey，这是我的解决方案:使用css -加载器散列css令牌并加载到js文件中。

​

//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'
		    ],
		}
	]
},

​

在JSX文件中，我们可以使用import来加载css令牌。

​

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

​