如何在React中導入特定於組件的CSS樣式？

Question

這是我試圖模仿的結構（來自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配置才能將相同的結構應用到我的項目中。

Answer 1

您可以像這樣配置您的webpack

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

Answer 2

很不確定，但似乎你正在尋找帶有javascript import styles from './styles.css'; styles.css javascript import styles from './styles.css'; 你的目錄中有一個style.css :)