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

Question

我正在学习如何使用 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

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。

根据文件扩展名，您使用 CSS，而不是 postcss-bem.css.

中的 JS

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

Answer 2

谢谢安德烈，这是我的解决方案：使用 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 文件中，我们可以使用导入来加载 css 令牌

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

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

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

javascript

reactjs

webpack

postcss

css-modules