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

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-loader 和 postcss-JS 来解析 postcss-bem.css

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

但是我得到了这样的错误

Module build failed: SyntaxError: Unexpected token ILLEGAL

我做错了吗？

Answer 1

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

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

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