1

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

我做错了吗？

4

2 回答 2

0

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

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

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

于 2016-01-06T10:53:12.700 回答
0

谢谢安德烈，这是我的解决方案：使用 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>;
    }
}

于 2016-01-07T03:12:19.533 回答