React+Sass+Webpack 本地样式问题

Question

我正在使用 3rd party react component，但我在正确配置 sass 时遇到了问题。该组件创建一系列 <li> html 标签，如果其中一个 <li> 被点击，它会添加一个 "active" class 名称： <li class="active">。我想为 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文件中的每个classname转换为以下格式："localIdentName=[name]_[local]__[hash:base64:5]"。这意味着我的 css 不再适用于 <li class="active">。相反，它现在适用于 <li classname="Test__active___2LBGS">。到目前为止，我想到了两个（不好的）解决方案：

我以某种方式重新配置 webpack 以不使用 localIdentName
我以某种方式让 <ReactTags /> 使用 class 名称：Test__active___2LBGS

这些似乎都不可行，所以我很困惑！！任何帮助深表感谢。

Answer 1

正如在 本地范围 下的 css-loader documentation 中所述，您可以将 :global 应用于您不希望加载器转换的样式：

:global (.tag_input li.active) {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

Answer 2

您应该使用 className 道具并设置活动状态，您将更新道具

<ReactTags className={props.active ? classes.tagInputActive : classes.tagInput}/>

React+Sass+Webpack 本地样式问题

React+Sass+Webpack local styling issue

css

sass

reactjs

webpack

css-loader