Wie kann ich komponentenspezifische CSS-Stile in React importieren?

Question

Das ist die Struktur, die ich (von react-boilerplate) zu imitieren bin versucht:

component 
    |Footer 
    |style.css 
    |Footer.js 

Innen Footer.js die Stile importiert werden, ganz elegant auf diese Weise:

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 (n) sind wird dann für das Fußzeilenelement generiert, um den Stil auf diese spezifische Komponente anzuwenden.

Aber wenn ich versuche, diese Struktur in meinem Projekt nachzuahmen, funktioniert es nicht. Das importierte Objekt styles ist immer leer. Ich vermute, dass ich vielleicht etwas abhängig bin, aber ich kann nicht herausfinden, was es sein könnte.

Ich würde gerne wissen, welche Abhängigkeit ich fehlen könnte und/oder Webpack-Konfiguration muss ich tun, um die gleiche Struktur auf mein Projekt anzuwenden.

Answer 1

Sie können Ihre webpack Config wie diese

. . . 
{ 
    test: /\.css$/, 
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
} 
. . . 

Answer 2

Ganz darüber nicht sicher, aber es scheint, dass Sie für styles.css mit javascript import styles from './styles.css'; suchen und Sie haben eine style.css in Ihrem Verzeichnis :)