如何在React中导入组件特定的CSS样式？

这是我想（从react-boilerplate）模仿结构：如何在React中导入组件特定的CSS样式？

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;

类名（S）的然后为页脚元素生成该样式以应用于该特定组件。

但是，当我尝试在我的项目中模仿这种结构它不工作。导入的styles对象始终为空。我怀疑我可能缺乏一些依赖，但我无法弄清楚它可能是什么。

我想知道哪些依赖我可能缺乏和/或webpack配置我需要做的，以便将相同的结构应用到我的项目。

来源

2016-07-21 Như Nguyễn

你是有style.css试图从'./styles.css'导入样式，但是你需要从style.css导入 –

验证导入路径并确保你已经配置了一个[CSS loader]（https://github.com/webpack/css-加载器）在你的webpack配置 –

该模式是从CSS模块，请参阅在这里获取更多信息：https：//github.com/css-modules/css-modules – Toby

你可以配置你的WebPack这样

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

来源

2016-07-21 09:54:04 Kawatare267

很不清楚的话，但似乎你与javascript import styles from './styles.css'; 寻找styles.css，你在你的目录:)

来源

2016-07-22 14:37:08 Ugarz

如何在React中导入组件特定的CSS样式？

回答

相关问题