我如何在 React 组件中使用带有 css-modules 或 postcss-js 的 postcss-bem答案

【问题标题】：How could I use postcss-bem with css-modules or postcss-js in React component我如何在 React 组件中使用带有 css-modules 或 postcss-js 的 postcss-bem
【发布时间】：2016-04-10 09:28:54
【问题描述】：

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

加载器：["style-loader","css-loader","postcss-loader?parser=postcss-js"]

但我得到了这样的错误

模块构建失败：SyntaxError: Unexpected token ILLEGAL

我做错了吗？

【问题讨论】：

标签： javascript reactjs webpack postcss css-modules

【解决方案1】：

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

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

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

【讨论】：

谢谢！我误解了 postcss-js 的建议，现在找到了将 css 令牌加载到 js 文件中的解决方案，我修改了我的 webpack.config.js，使用 css-loader 散列并将 css 令牌作为类名加载到我的 React 组件中.非常感谢！

【解决方案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 文件中，我们可以使用 import 来加载 css token

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

【讨论】：

在这种情况下，您不需要 postcss-bem 和 postcss-js。