感谢您的时间和帮助。我花了好几个小时试图解决这个问题似乎无法深究它。
我有这个反应组件:
import styles from './style.scss';
class ButtonComponent extends React.Component {
render() {
return (
<div className={styles.bunny}>
hello world
</div>
);
}
}
和scss文件:
.bunny {
display: block;
margin-top:50px;
margin-bottom:55px;
background-color: blue;
}
当我加载我的html时,div在我预期为<div class="bunny">
时没有类名
当我将类名放在react组件中时,就像这样:
<div className="bunny">
然后我可以在浏览器中看到className。
我做错了什么?
提前非常感谢你。
答案 0 :(得分:2)
首先,您需要保证其定义为:console.log(styles)
林&#39;不确定是否正确导入style.scss。
答案 1 :(得分:0)
您需要像这样导入您的scss ...
import './styles.scss';
Webpack将照顾您的样式,以便您可以将className作为字符串添加到组件中。
<div className="bunny">Hello World</div>
答案 2 :(得分:0)
为我解决这个问题的是将我的 scss 文件的名称从 style.scss
更改为 style.module.scss
答案 3 :(得分:0)
对我来说这是因为我使用 commonjs 的 require
来加载 es 模块。