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

Question

我正在学习如何使用becs风格的postcss-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-loader与postcss-JS一起使用来解析postcss-bem.css时

加载程序：[“样式加载程序”，“ css加载程序”，“ postcss加载程序？parser = postcss-js”]

但是我得到这样的错误

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

我做错了吗？

Answer 1

postcss-js是CSS-in-JS解决方案，因此可以与用JS编写的CSS一起使用。

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

同样，将postcss-bem插件与CSS模块一起使用也没有任何意义。 BEM允许您通过为每个选择器添加前缀来隔离CSS。 但是CSS模块也可以隔离CSS。 因此，您这两个PostCSS工具会做同样的事情。

Answer 2

谢谢Andrey，这是我的解决方案：使用css-loader将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>; } }