【发布时间】：2017-03-21 17:36:50
【问题描述】：
我在设置子组件样式时遇到问题，如下所示：
/*parent component*/
import './styleguide/main.scss';
export default function AppRoot(props) {
return (
<BrowserRouter>
<Provider store={props.store}>
<Routes/>
</Provider>
</BrowserRouter>
);
}
/*somewhere in child component*/
<button className='btn' type="button" onClick={() => fields.push({})}>
New Active Substance
</button>
实际上，仅如果我直接将样式导入到子组件中，样式将起作用，如下所示：
import styles from '../main.scss'
并将它们应用为classNames={styles.btn}
那么，我怎样才能让它在父母中工作并将它们作为classNames='btn' 应用在孩子中？
【问题讨论】：
-
你能给我看看你的 webpack.config.js 文件吗？
-
您已将 css-modules 定义为 webpack 管道的一部分。 Css-modules 转换您的 css 名称以避免冲突。在开始编写应用程序之前了解您的 webpack 配置是很好的。它将帮助您避免像这样的陷阱。
-
@RafaelBerro 这是整个 webpack.config.dev.js 文件 --> dropbox.com/s/wx69ixha2rp4dp2/webpack.config.dev.js?dl=0
-
@niba 谢谢，实际上 css-modules 默认在 mern 样板中，我没注意
-
您的 webpack.config.js 文件缺少 sass-loader 模块。看看我正在开发的这个boilerplate，它使用了你真正需要的一切。