これは私が模倣しようとしている構造です（react-boilerplateから）：
component
|Footer
|style.css
|Footer.js
Footer.js内では、スタイルは次のように非常にエレガントにインポートされます。
import React from 'react';
import A from 'components/A';
import styles from './styles.css';
function Footer() {
return (
<footer className={styles.footer}>
<section>
<p>This project is licensed under the MIT license.</p>
</section>
<section>
<p>Made with love by <A href="https://twitter.com/mxstbr">Max Stoiber</A>.</p>
</section>
</footer>
);
}
export default Footer;
次に、フッター要素のclassNameが生成され、その特定のコンポーネントにスタイルが適用されます。
しかし、プロジェクトでこの構造を模倣しようとすると、機能しません。インポートされたstylesオブジェクトは常に空です。依存関係が不足しているのではないかと思いますが、それが何であるかわかりません。
同じ構造をプロジェクトに適用するために、不足している可能性のある依存関係やWebpack構成を知りたいのですが。
このようにwebpackを設定できます
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加