我在为react组件设置样式时遇到了一个小问题。我将scss样式表放在一个单独的文件中,并将它们导入到我的react文件中。我的scss样式表看起来像这样:
.testStyle {
font-family: avenir;
color: blue;
}
我的react文件看起来像这样:
import React from 'react'
import styles from '../styles/main.scss'
class Temp extends React.Component {
render() {
return (
**<div className={styles.testStyle}>**
<h1>Hello</h1>
</div>
)
}
}
export default Temp
有了这个设置,我的样式没有通过,但是,如果它的工作,如果我用<div className='testStyle'>
替换星号线,所以它似乎是正确导入的样式。有人可以帮助这一点吗?谢谢。
7条答案
按热度按时间0qx6xfy61#
我假设你在你的webpack中使用css加载器。你需要启用modules:true
如果你不想让这个行为成为默认行为,在你的css中你可以用途:
如果你有模块:如果你不想让css loader编译你的类,你可以使用
请参阅文档:https://github.com/webpack-contrib/css-loader和https://github.com/css-modules/css-modules
8tntrjer2#
尝试将
.scss
文件扩展名重命名为.module.scss
**如果
sass-loader
有问题,或者您没有将其配置为支持.scss
文件-它的原始scss
将仅支持.module.scss
扩展名。我也遇到了同样的问题,它解决了我的问题。
你也可以检查here我问的问题。
ycl3bljg3#
导入样式表只会告诉Webpack或其他构建工具处理该样式表并将其包含在输出文件中。据我所知,它不允许您使用它来模板化JSX。因此,只需导入它,您的样式将在构建周期发生后可用。您不需要以任何方式实际使用它。
className
接受一个字符串并直接转换为htmlclass
-所以就像这样使用它。agyaoht74#
mklgxw1f5#
您的webpack配置中可能缺少 sass-loader。请查看此处,
我的建议是放弃 sass 而使用 postcss,它是广泛的,并且可以像上面代码中使用类的方式工作。
对于postcss安装和配置检查这里
mbjcgjjk6#
一些步骤将解决您的问题
1.文件名必须是:FileName.module.css
1.导入文件到App.js
1.用于组件
1.浏览器
14ifxucb7#
试试这个: