我正在使用使用3rd party react 组件,但我无法正确配置我的 sass。这个组件创建了一系列<li>
html 标签,如果其中一个<li>
被点击,它会添加一个“活动”类名:<li class="active">
. 我想为该活动 <li>
元素自定义 css。为此,我创建了一个包含以下内容的 Test.scss 文件:
.tag_input li.active {
font-weight: bold;
text-decoration: underline;
color: red;
}
要使用这种样式,我做了以下反应
import classes from './Test.scss'
export const Test = (props) => {
return (
<ReactTags
classNames={{
tags: classes.tag_input,
}}
...
>
)
}
问题是,当 Webpack 加载这个 Sass 文件时,它使用css-loader,它将每个本地 .sass 文件中的每个类名转换为以下格式:“localIdentName=[name]_[local]__[hash:base64:5] ”。这意味着我的 css 不再适用于<li class="active">
. 相反,它现在适用于<li classname="Test__active___2LBGS">
. 到目前为止,我已经想到了两个(坏的)解决方案:
- 我以某种方式重新配置 webpack 以不使用 localIdentName 重命名某些 css 类名
- 我以某种方式
<ReactTags />
使用了类名:Test__active___2LBGS
这些似乎都不可行,所以我很困惑!任何帮助深表感谢。