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 のドキュメントでこの機能を見つけましたが、postcss-JS で webpack の postcss-loader を使用して postcss-bem.css を解析しようとすると、

ローダー: ["style-loader","css-loader","postcss-loader?parser=postcss-js"]

しかし、私はこのようなエラーを得ました

モジュールのビルドに失敗しました: SyntaxError: Unexpected token ILLEGAL

私はそれを間違っていますか？

4

2 に答える 2

0

Andrey に感謝します。これが私の解決策です。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>;
    }
}

于 2016-01-07T03:12:19.533 に答える