Question

我正在学习如何使用postcss-bem生成bem风格的css文件，但是我想知道是否有像CSS-Modules或Postcss-JS这样的软件包，我可以用来做下面的事情：

＆＃13;

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />

＆＃13;

我在CSS-Modules和Postcss-JS的文档中找到了这个功能但是当我尝试使用webpack＆postcss-loader和postcss-JS来解析postcss-bem.css

加载器：[＆＃34;样式加载器＆＃34;，＆＃34; css-loader＆＃34;，＆＃34; postcss-loader？parser = postcss-js＆＃34;]

但是我得到了这样的错误

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

我做错了吗？

Answer 1

postcss-js是一个CSS-in-JS解决方案，所以它适用于用JS编写的CSS。

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

对于使用CSS模块的postcss-bem插件也没有任何意义。 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文件中，我们可以使用import来加载css标记

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

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

2 个答案: